您的位置：首页 > Web前端 > CSS

css-水平和垂直布局

2016-04-02 17:06 1056 查看

1.元素的水平居中？垂直居中？水平垂直居中？

水平居中

1.如果需要居中的是常规流中inline元素—图片，按钮，文字等行内元素(display为inline或inline-block等)

则在 父元素 中使用text-align: center;

<div class="content">
<span>a aa a</span>
</div>

<style>
.content{
width: 500px;
border: 1px solid black;
text-align: center;
}
</style>

2.如果需要居中的是常规流中block元素—是常规流，对浮动元素或绝对定位元素无效。

或者是多个元素的水平排列，可以用flex或者是inline-bolck和text-align:center;

已经知道宽度：用margin

不知道宽度：1.display:inline-block,父元素text-align 2.flex布局

则需要为

1.元素设置宽度，

2.设置左右margin为auto，

3.IE6下需在父元素上设置text-align: center;再给子元素恢复需要的值

<body>
<div class="content">
aaaaaa aaaaaa a a a a a a a a
</div>
</body>

<style>
body {
background: #DDD;
text-align: center; /* 3 */
}
.content {
width: 500px;      /* 1 */
text-align: left;  /* 3 */
margin: 0 auto;    /* 2 */

background: purple;
}
</style>

或者使用inline-block水平居中

仅inline-block属性是无法让元素水平居中，display:inline-block;

关键之处要在元素的父容器中设置text-align的属性为“center”，这样才能达到效果

或者用flex布局

<div class="flex">
<div class="child ">
non-child
</div>
</div>

.flex{
width: 300px;
height: 200px;
border: 2px solid #ccc;
box-sizing: border-box;
display:flex;
flex-direction: row;
justify-content:center;

}
.child{
width: 100px;
height: 100px;
background: green;
box-sizing: border-box;
}

3.如果需要居中的元素为浮动元素

则需要为：

1.为元素设置宽度

2.position: relative

3.浮动方向偏移量（left或者right）设置为50%

4.浮动方向上的margin设置为元素宽度一半乘以-1

<body>
<div class="content">
aaaaaa aaaaaa a a a a a a a a
</div>
</body>

<style>
body {
background: #DDD;
}
.content {
width: 500px;         /* 1 */
float: left;

position: relative;   /* 2 */
left: 50%;            /* 3 */
margin-left: -250px;  /* 4 */

background-color: purple;
}
</style>

4.如果需要居中的元素为浮动元素，但不知道浮动元素的宽度，则需要多一个包裹要居中的元素。

则需要为：

1.把浮动元素相对定位到父元素宽度50%的地方，但这个时候元素还不是居中的，而是比居中的那个位置多出了自身一半的宽度

2.他里面的子元素再用一个相对定位，把那多出的自身一半的宽度拉回来，而因为相对定位正是相对于自身来定位的，所以自身一半的宽度只要把left 或 right 设为50%就可以得到了，因而不用知道自身的实际宽度是多少。

<head>
<style>
body{
margin:0;
padding:0;
}
.parent{
width:300px;
height:200px;
border:1px solid red;
}
/*浮动居中的方法需要有这么一个包裹的元素，需要浮动的就是这个元素*/
.wraper{
float:left;//在这个包裹元素上浮动，让它自适应的宽度
position:relative;
left:50%;//相对定位到父元素宽度一半的地方
clear:both;
}
.child{
border:1px solid blue;//这个是真正需要居中的元素
position:relative;//在这个元素上进行相对定位
left:-50%;//向左偏移本身的一半宽度，正好就居中了
white-space:nowrap;
}
</style>

</head>
<body>
<div class="parent">
<div class="wraper">
<div class="child">我水平居中了</div>
</div>
<div class="wraper" style="margin-top:20px;">
<div class="child">宽度不同</div>
</div>
<div class="wraper" style="margin-top:20px;">
<div class="child">确实啊</div>
</div>
</div>
</body>

5.如果需要居中的元素为绝对定位元素

则需要：

1.为元素设置宽度

2.偏移量设置为50%

3.偏移方向外边距设置为元素宽度一半乘以-1

<body>
<div class="content">
aaaaaa aaaaaa a a a a a a a a
</div>
</body>

<style>
body {
background: #DDD;
position: relative;
}
.content {
width: 800px;/* 1 */

position: absolute;
left: 50%;/* 2 */
margin-left: -400px;/* 3 */

background-color: purple;
}
</style>

或者

需要(这种方法要记住，很好)

1.为元素设置宽度

2.设置左右偏移量都为0

3.设置左右外边距都为auto

<body>
<div class="content">
aaaaaa aaaaaa a a a a a a a a
</div>
</body>

<style>
body {
background: #DDD;
position: relative;
}
.content {
width: 800px;/* 1 */

position: absolute;
margin: 0 auto;/* 3 */
left: 0;/* 2 */
right: 0;/* 2 */

background-color: purple;
}
</style>

垂直居中

1.行级元素–line-height

使用line-height让单行的文字垂直居中,line-height设置伪父容器的height，适用于只有一行文字的情况。

<div class="top">
<span>我</span>
</div>

.top{
width: 300px;
height: 100px;
text-align: center;//加上本行之后就是水平垂直居中了
border: 1px solid black;
}
span{
line-height: 100px;
}

2.块级元素(设置成line-height或者是table格式)

子元素上设置display:inline-block;然后就和行内元素一样了~

.top{
width: 300px;
height: 100px;
text-align: center;//加上本行之后就是水平垂直居中了
border: 1px solid black;
}
.bottom{
line-height: 100px;
display: inline-block;
}

<div class="top">
<div class="bottom">我是</div>
</div>

或者是用table和table-cell

<div id="parent">
<div id="child">Content here</div>
</div>

#parent {display: table;}
#child {
display: table-cell;
vertical-align: middle;
}

或者用flex布局

<div class="wrap flex">
<div class="non-height ">1111</div>
</div>

.wrap{
width:200px ;
height: 300px;
border: 2px solid #ccc;
box-sizing: border-box;
}
.non-height{
background: green;
}
.flex{
display: flex;
flex-direction: column;
justify-content: center;
}

3.绝对定位元素居中

<div id="parent">
<div id="child">Content here</div>
</div>

#parent {position: relative;}
#child {
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}

水平垂直居中

1.行级元素

父元素中设置text-align

行级元素设置vertical-align(或者行高设置和父元素一样)

2.块级元素

使用display:table-cell来居中或者margin:auto

对于那些不是表格的元素，我们可以通过display:table-cell 来把它模拟成一个表格单元格，这样就可以利用表格那很方便的居中特性了。例如：

<div style="display:table-cell;vertical-align:middle;text-align:center;width:200px;height:200px;border:1px solid black;">
<div style="width:50px;height:50px;background:#03F;display:inline-block;"></div>
</div>

div{

width:100px;

height:100px;

margin:0 auto;

}

3.浮动元素水平垂直居中

div{
float:left;
width:500px;
height:300px;
position:relative;
top:50%;
left:50%;
margin:-150px 0 0 -250px;
}

4.绝对元素水平垂直居中

让父元素relative结合margin和top，left布局–或者flex布局

<div class="container">
<div class="box"></div>
</div>

方法一:让父元素relative结合margin和top，left布局

<style>
.container{
width: 600px;
height: 400px;
border: 1px solid #000;
position: relative;
}
.box{
width: 200px;
height: 100px;
border: 1px solid #000;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top:-50px;
}
</style>

方法二：flex布局

<style>
.container{
width: 600px;
height: 400px;
border: 1px solid #000;
display: flex;
justify-content:center;
align-items:center;

}
.box{
width: 200px;  //宽度可以为任意
height: 100px; //高度可以为任意
border: 1px solid #000;

}
</style>
<div class="container">
<div class="box"></div>
</div>

水平垂直居中已知宽高元素

1.父元素relative，子元素absolute

.parent-panel2{
width:100%;
height:400px;
border:1px solid #888;
position: relative;
}
.middle-panel2{
position: absolute;
width:300px;
height: 100px;
border:1px solid #888;
top:50%;
margin-top:-50px;
left: 50%;
margin-left: -150px;
}

2.绝对定位

.div2 {
position: absolute;
border: 1px solid #888;
width: 100px;
height: 100px;
margin: auto;
left: 0;
right: 0;
bottom: 0;
top: 0;
}

水平垂直居中未知宽高元素

1.flex布局

<style>
.container{
width: 600px;
height: 400px;
border: 1px solid #000;
display: flex;
justify-content:center;
align-items:center;
}
.box{
width: 200px;  //宽度可以为任意
height: 100px; //高度可以为任意
border: 1px solid #000;

}
</style>
<div class="container">
<div class="box"></div>
</div>

2.display:table-cell方法

#demo{
display:table;
width:500px;
margin:10px auto;
background:#eee;
}
#demo p{
display:table-cell;
height:100px;
vertical-align:middle;
}

3.利用translate3d(-50%,-50%,0)实现垂直居中，只支持高版本

.parent{
position:relative;
}
.div2 {
position: absolute;
border: 1px solid #888;
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%) 0;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航