宁德正

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

css 绝对居中

我是一个前端的菜鸟,对于绝对居中前几天也困惑了我不少时间,今天我就把我知道的两个方法写出来,希望能记住也希望帮助到和我一样刚接触前端不久的同学。

第一种是 你需要居中的元素有固定的宽高:

  首先给他的父元素一个相对定位的属性:position: relative;

  然后给需要定位的元素加上属性:

    width: 100px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -100px;

    简单的来说就是以宽高的50%来定位,然后减去它自身多出来的一半。

第二种就是 你需要居中的元素 没有 固定的宽高,那样的话你就没法减去他多出来的一半了,那怎么做呢?请看:

  首先还是给他的父元素一个相对定位的属性:position: relative;

  然后给需要定位的元素加上属性:

    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;

    当然,如果他不是块状元素的话,还要加上:display: block;

 

posted on 2017-01-22 17:17  宁德正  阅读(179)  评论(0)    收藏  举报