实现块级元素垂直居中
2017-09-16 21:55
211 查看
代码如下
html：
<body>
<div class="content"></div>
</body>
css：
.content{
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
width: 400px;
min-height: 200px;
background-color: #ccc;
}
实现原理：
首先将块级元素 相对于浏览器 向上 向左偏移50%，这个时候块级元素的左上角位于浏览器的中心点位置。
利用transform中的translate属性将块级元素向左 向上平移块级元素的自身的50%；就可以实现元素本身的垂直居中
、
转载翻译于https://www.douban.com/note/486456092/
html：
<body>
<div class="content"></div>
</body>
css：
.content{
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
width: 400px;
min-height: 200px;
background-color: #ccc;
}
实现原理：
首先将块级元素 相对于浏览器 向上 向左偏移50%，这个时候块级元素的左上角位于浏览器的中心点位置。
利用transform中的translate属性将块级元素向左 向上平移块级元素的自身的50%；就可以实现元素本身的垂直居中
、
转载翻译于https://www.douban.com/note/486456092/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- css实现块级元素水平和垂直居中
- css实现元素的垂直居中
- CSS3 Flexbox轻巧实现元素的水平居中和垂直居中
- CSS实现父级元素属性display为block的元素垂直和水平居中的三种方法
- 用 CSS 实现元素垂直居中
- 小tip: margin:auto实现绝对定位元素的水平垂直居中
- 行内元素与块级元素垂直居中
- CSS3 Flex实现元素的水平居中和垂直居中
- 块级元素垂直居中问题
- 不知道自己高度和父容器高度的情况下，用 CSS 实现元素垂直居中
- 块级元素的垂直居中
- 如何实现固定宽高的DOM元素的水平垂直居中
- css实现元素水平垂直居中
- 父容器height不确定的情况下，实现子元素垂直方向自适应居中
- 实现不定高元素垂直居中三中方式
- CSS3 Flex实现元素的水平居中和垂直居中
- table-cell实现大小不固定元素的垂直居中
- 元素宽度、高度不确定时实现绝对定位水平垂直居中
- 利用writing-mode实现元素的垂直居中
- 元素水平垂直居中的css3实现