关于css设置元素垂直水平居中的问题

第一种: 利用定位属性实现,但需要知道元素的宽高

<div class="box"></div><style>.box{weight:200px;height:400px;<!--给元素添加定位属性-->position:absolute;<!--设置元素的定位位置,距离上,做都为50%-->left:50%;top:50%;<!--设置元素的左外边距,上外边距为宽高的负1/2-->margin-left:-100px;margin-top:-200px;<!--或者简写-->margin: -200px 0 0 -100px; //四个值分别对应,上,右,下,左}*优点:兼容性好; 缺点:必须知道元素的宽高;
</style>

第二种: 利用定位属性实现,不用知道元素的宽高

<div class="box"></div><style>.box{weight:200px;height:400px;<!--把元素变成定位元素-->position:absolute;<!--设置元素的定位位置,距离上,做都为50%-->left:50%;top:50%;<!--设置元素的相对于自身的偏移度为负50%(也就是元素自身尺寸的一半)-->transform:translate(-50%,-50%)}*这是css3里的样式;优点:不需要知道元素的宽高;缺点:兼容性不好，只支持IE9+的浏览器
</style>

第三种:利用定位属性的四个值结合margin实现

<div class="box"></div><style>.box{weight:200px;height:400px;<!--把元素变成定位元素-->position:absolute;<!--设置元素的定位位置,距离上,做都为50%-->left:0;top:0;right:0;bottom:0<!--设置元素的margin样式值为 auto-->margin:auto;}*兼容性较好，缺点:不支持IE7以下的浏览器
</style>

以上三种是使用定位属性实现的垂直水平居中,下面是弹性布局中实现的元素垂直水平居中的方法

display:flex实现垂直水平居中

<!DOCTYPE html>
<html><heade><style>.box{display:flex; //将外层div设置为弹性容器height:200px;width:400px;justify-content:center; //水平方向居中align-items:center; // 垂直方向居中}.item{width:50px;height:40px;}</style></heade><body><div class="box"><div class="item1></div><div class="item2></div><div class="item3></div><div class="item4></div><div class="item5></div></div></body>
</html>

关于css设置元素垂直水平居中的问题相关推荐

html body不定宽居中,纯CSS实现元素垂直水平居中-非固定宽度
这里不讨论行内元素的居中!! 盒子垂直居中+水平居中的需求时经常遇到的,看到的较多实现逻辑是固定content-box的宽度,通过让margin-left和margin-top等于宽或高的负一半来实现 ...
css面试题实现元素垂直水平居中-包括未知宽高的元素五种回答
css实现元素垂直水平居中-包括未知宽高的元素这个一道很经典的面试题,做项目中也常会出现这样的需求. 现在我就用几种比较常用的方法.兼容性也列出来. 第一种已知宽高(定位加负边距解决)兼容到IE6 ...
css 怎么设置盒子水平居中,用一段css实现盒子垂直水平居中方法(8种)-案例
效果图 - 在线案例 css3中的属性:transform: translate(x,y) .box { width: 100px; height: 100px; background: orange ...
css设置元素的宽高为整数，为什么有的浏览器解析出来的宽高是小数？
如图: 因为把当前的标签页缩放显示了,所以浏览器会渲染出非整数的盒子尺寸参考文章:css设置元素的宽高为整数,为什么有的浏览器解析出来的宽高是小数? - 孙北吉的回答 - 知乎
CSS设置元素叠加显示
CSS设置元素叠加显示的方式: 方法1:设置负margin: 给元素设置负margin使其移动后原来的位置是不会保留的负margin可以让元素的占用空间变小后面的元素可以覆盖当前的元素 (这里有 ...
CSS实现DIV垂直水平居中
CSS实现DIV垂直水平居中在页面设计中,很多地方都需要div的垂直水平居中,在前端开篇的学习中,也是使用较多的地方,所以我整理了三种方法帮助大家去解决问题,代码可直接使用,仅供参考学习. 方法方 ...
html5中底部对齐怎么写,css设置元素底部垂直对齐
css中怎么让div里面的文字底部对齐两种办法,第一种可以作为默认选择.两种办法都可以让文字底部对齐. css如何使div里面的文字垂直对齐页面里有五段文字/图片,我想使每个部分的文字,像旁边的图 ...
css图片如何垂直水平居中设置
css设置图片垂直居中的方法: 一.使用flex实现垂直居中利用css flex实现垂直居中,有些浏览器可能不兼容flex. 首先要创建一个包裹着图片的div元素,然后定义基础属性. 以下图片img ...
CSS里各种垂直水平居中方式的基础用法
首先,依旧是概念.介绍一下行内元素和块级元素,这个很重要,因为有的属性只能用于块元素,而有的正好相反,在一定的情况下,它们也可以相互转换,比如用display来进行设置. 行内元素(又叫内联元素inl ...

关于css设置元素垂直水平居中的问题

关于css设置元素垂直水平居中的问题相关推荐

最新文章

热门文章