码迷,mamicode.com
首页 > 其他好文 > 详细

居中div,居中浮动的元素

时间:2018-04-04 20:54:27      阅读:189      评论:0      收藏:0      [点我收藏+]

标签:lex   orm   post   abs   header   www   内容   mil   伪元素   

定位法:position:absolute

如果子级div有定义宽和高的话就可以用这个方法。注意:margin-top,和margin-left的值均为高和宽值的一半

技术分享图片

 

 

margin:auto法

这个也可以是定位法。用这个方法要求子级div必须设置宽的值,不然没有效果哦~margin:auto是水平垂直都居中,如果仅仅设置水平居中,可设置为margin:auto 0;同理,如果仅仅设置垂直居中,可设置为margin:0 auto.

 技术分享图片

display:table-cell法

这个方法主要针对多行文字内容的垂直居中对齐。注意:text-align:center设置了文字的水平居中对齐,vertical-align:middle设置的是垂直居中对齐。

技术分享图片

transform:translate(x,y)法  

这个是css3中的新属性,如果子级元素没有设置宽和高值的话可以用这个方法来实现。这在我们做自适应页面的时候可以用到。

技术分享图片

before,after伪元素法

这个也是让子级元素垂直居中了。如果还想要水平居中的话可以配合其他几种方法配合使用来实现,比如给子级元素设置:margin:0 auto;这样就水平和垂直都居中了。

技术分享图片

Flex布局法

这个方法要充分考虑浏览器的兼容性。要垂直居中的元素也是无需设置宽和高的值,可以用在自适应页面中来实现水平垂直居中。

技术分享图片

在不设置 Div 元素的宽度(width)的情况下

技术分享图片

 

居中浮动的元素

 解决方法很简单:在浮动元素外面再嵌套一层div

技术分享图片

 其他:http://www.cnblogs.com/gassnake999/p/6941415.html

居中div,居中浮动的元素

标签:lex   orm   post   abs   header   www   内容   mil   伪元素   

原文地址:https://www.cnblogs.com/pengc/p/8718616.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!