css 怎么把div居中(设定div层内容居中)
第一种:通过 position translateY a:水平及垂直同时居中,我来为大家科普一下关于css 怎么把div居中?下面希望有你要的答案,我们一起来看看吧!
css 怎么把div居中
一、position元素第一种:通过 position translateY
a:水平及垂直同时居中
.wrapper {
position: relative;
width: 300px;
height: 300px;
border: solid 2px red;
border-radius: 5px;
}
.wrapper .content{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
height: 100px;
width: 100px;
border: solid 2px blue;
border-radius: 5px;
}
b:水平居中
.wrapper {
position: relative;
width: 300px;
height: 300px;
border: solid 2px red;
border-radius: 5px;
}
.wrapper .content{
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 100px;
width: 100px;
border: solid 2px blue;
border-radius: 5px;
}
c:垂直居中
.wrapper {
position: relative;
width: 300px;
height: 300px;
border: solid 2px red;
border-radius: 5px;
}
.wrapper .content{
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 100px;
width: 100px;
border: solid 2px blue;
border-radius: 5px;
}
第二种:通过 position margin
a:水平及垂直同时居中
.wrapper {
position: relative;
width: 300px;
height: 300px;
border: solid 2px red;
border-radius: 5px;
}
.wrapper .content{
position: absolute;
top: 50%;
margin-top: -50px;
left: 50%;
margin-left: -50px;
height: 100px;
width: 100px;
border: solid 2px blue;
border-radius: 5px;
}
b:水平居中
1 .wrapper {
2 position: relative;
3 width: 300px;
4 height: 300px;
5 border: solid 2px red;
6 border-radius: 5px;
7 }
8
9 .wrapper .content{
10 position: absolute;
11 left: 50%;12 margin-left: -50px;
13 height: 100px;
14 width: 100px;
15 border: solid 2px blue;
16 border-radius: 5px;
17 }
c:垂直居中
.wrapper {
position: relative;
width: 300px;
height: 300px;
border: solid 2px red;
border-radius: 5px;
}
.wrapper .content{
position: absolute;
top: 50%;
margin-top: -50px;
height: 100px;
width: 100px;
border: solid 2px blue;
border-radius: 5px;
}
第一种:元素内容没有标签,只有内容,这样垂直设置height和line-height一样就可以了,水平设置text-align:center就可以
.wrapper{
height: 50px;
line-height: 50px;
text-align: center;
}
第二种:元素内部元素居中,设置如下:
.wrapper-table{
display: table-cell;
height: 100px;
width: 100px;
vertical-align: middle;
text-align: center;
border: solid 2px yellow;
}
.wrapper-table .wrapper-table-cell{
border: solid 2px #009900;
}
免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com