CSS居中方式总结

2018-06-24 01:25:52来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

1.text-align:center;

  使用以上方式居中是将父级容器中display:inline;的行内元素或者文字进行水平居中。

2.inline-height:(height)值;

  使用inline-height时经常和height一起使用,使得内容垂直方向上居中,建议在列表内部的li中使用;

3.margin:auto;

  使用margin来居中时,一般是在元素给出了确切的width值,设置margin:auto; 或者 margin: 0 auto; 是一样的效果:当前的元素将水平居中;

  使用margin时,也可以设置 margin-left和margin-right的值相等,也能实现水平居中;

4.position定位居中

  根据top和left或者bottom、right进行设置,可使元素水平、垂直居中;但是父级元素必须设置高度;

5.Flex盒子

  Flex容器的flex-align:center;

       align-items:center;

       justify-cotent:center;

  项目属性的align-self:center;

6.负值margin:

 1 .box {
 2     width: 600px;
 3     height: 400px;
 4     position: relative;
 5 } 
 6 
 7 .box1 {
 8     width: 300px;
 9     height: 200px;
10     padding: 20px;
11     position: absolute;
12     top: 50%;
13     left: 50%;
14     margin-left: -170px;/*(width+padding)/2 */
15     margin-top: -120px;/*(height+padding)/2 */
16 } 

  以上代码可实现元素的水平垂直居中。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:聊聊AngularJs

下一篇:纯css实现div中未知尺寸图片的垂直居中