首页 » CSS » CSS布局——水平垂直居中

CSS布局——水平垂直居中

原文 http://blog.csdn.net/u012194956/article/details/79088455

2018-01-19 02:00:21阅读(460)

题外话:这是一个让人抓狂的问题。

HTML文档结构如下:

<div class="outer">
    <div class="inner"></div>
</div>

实现效果:

<a href=CSS布局——水平垂直居中" src="http://img.blog.csdn.net/20180117210359061?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMjE5NDk1Ng==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" width="50%" height="50%" alt="" />

1.(子元素已知宽高)给父容器设置绝对定位(absolute),子元素设置为相对定位(relative),top、left设置为50%,margin-top、margin-left分别设置为高宽的一半的负数。

.outer{
    position:relative;
    width:80%;
    height:400px;
    background:#DCDCDC;
}
.inner{
    width:400px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-200px; /*width一半的负数*/
    margin-top:-100px; /*height一半的负数*/
    background:green;
    border:2px solid #000000;
}

2.(子元素未知宽高)使用CSS3新特性transform。设置父元素相对定位(relative),子元素绝对定位(absolute),top、left为50%,X轴、Y轴偏移-50%。

.outer{
	position:relative;
	width:80%;
	height:400px;
	background:#DCDCDC;
}
.inner{
	width:30%;
	height:40%;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%); /*X负方向移宽度的一半,Y负方向移高度的一半*/
	background:green;
	border:2px solid #000000;
}

3.(子元素未知宽高)父元素相对定位(relative),子元素绝对定位(absolute),top/right/bottom/left均为0,margin为auto。

.outer{
	position:relative;
	width:80%;
	height:400px;
	background:#DCDCDC;
}
.inner{
	width:30%;
	height:40%;
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	margin:auto;
	background:green;
	border:2px solid #000000;
}

4.(父元素已知宽高)父元素设置display为table-cell,文字居中(text-align),垂直居中(vertical-align),子元素根据是否为块级元素设置display为inline-block。

.outer{
	width:600px;
	height:400px;
	display:table-cell;
	text-align:center;  /*水平居中*/
	vertical-align:middle; /*垂直居中*/
	background:#DCDCDC;
}
.inner{
	width:30%;
	height:40%;
	display:inline-block; /*块级元素需设置此行,内联元素不设置*/
	background:green;
	border:2px solid #000000;
}
附:
display属性值table-cell说明:元素会作为一个表格单元格显示,效果类似于<td>。需要注意的是,此属性值的效果会被float,position:absolute破坏,应避免同时使用。

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹