元素的水平居中
2022-08-31 本文已影响0人
未路过
水平居中:
1.行内级元素:
* 设置父元素的text-align: center
2.块级元素:
* 设置当前块级元素(宽度) margin: 0 auto;
3.绝对定位
* 元素有宽度情况下, left0/right0/margin: 0 auto;
4.flex
* justify-content: center
1. 行内级元素(包括inline-block元素) 行内非替换元素span/a 行内替换元素 img/input
水平居中：在父元素(无论什么父级元素，只要子元素是inline-block，就可以居中。)中设置text-align: center
image.png
<style>
.father{
width:300px;
height: 300px;
background-color: red;
text-align: center;
}
</style>
</head>
<body>
<div class="father">
<span class="son" style="background-color: green;">我是儿子</span>
</div>
<div>我是标准流div</div>
2.块级元素(居中元素必须要有宽度)
水平居中：margin: 0 auto
父元素的宽度 = 块级元素宽度 + margin-left + margin-right（margin：0 auto 然后就可以水平居中的原理，因为margin-left margin-right是默认值auto，就是由浏览器决定，自动均分了）
如果不给子元素宽度，只是设置它的margin为0，auto，那么子元素独占父元素一列。
<style>
.father{
width:300px;
height: 300px;
background-color: red;
text-align: center;
}
.son{
width: 100px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="father">
<div class="son" style="background-color: green;">我是儿子</div>
</div>
<div>我是标准流div</div>
3.绝对定位（居中元素必须要有宽度。）
设置剧中元素的left, right,为0， margin0 auto
style>
.father{
position: relative;
width:300px;
height: 300px;
background-color: red;
}
.son{
position:absolute;
width: 100px;
left: 0;
right: 0;
margin:auto;
background-color: green;
}
</style>
</head>
<body>
<div class="father">
<div class="son">我是儿子</div>
</div>
<div>我是标准流div</div>
4. flex
给居中元素设置justigy-content:center
