0
点赞
收藏
分享

微信扫一扫

CSS的12中水平垂直居中方法

得一道人 2022-07-27 阅读 36
csscss3html

文章目录


一、水平垂直居中的12种方法

1.absolute + 负margin

	<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
position: relative;
height: 100vh; /* 必须设置高度,这里我设置的高度是在当前窗口水平垂直居中 */
}
#div1{
position: absolute;
top:50%;
left: 50%;
height: 300px;
width: 300px;
margin-top: -150px; /* 设置为高度的一半 */
margin-left: -150px; /* 设置为宽度的一半 */
background-color: aqua;
}
</style>
<body>
<div id="div1">

</div>
</body>

2. absolute + margin:auto

	<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
position: relative;
height: 100vh;
}
#div1{
position: absolute;
top:0;
right: 0;
bottom: 0;
left: 0;
height: 300px;
width: 300px;
margin: auto;
background-color: aqua;
}
</style>
<body>
<div id="div1">

</div>
</body>

3.absolute + calc

	<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
position: relative;
height: 100vh;
}
#div1{
position: absolute;
top:calc(50% - 150px); /* 减去高度的一半 */
left: calc(50% - 150px); /* 减去宽度的一半 */
height: 300px;
width: 300px;
background-color: aqua;
}
</style>
<body>
<div id="div1">

</div>
</body>

4.absolute + translate

	<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
position: relative;
height: 100vh;
}
#div1{
position: absolute;
top:50%;
left: 50%;
width: 300px;
height: 300px;
transform:translate(-50%,-50%);
background-color: aqua;
}
</style>
<body>
<div id="div1">

</div>
</body>

5. flex + justify-content + align-items

	<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
#div1{
width: 300px;
height: 300px;
background-color: aqua;
}
</style>
<body>
<div id="div1">

</div>
</body>

6.flex + margin auto

	<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
display: flex;
height: 100vh;
}
#div1{
width: 300px;
height: 300px;
background-color: aqua;
margin: auto;
}
</style>
<body>
<div id="div1">

</div>
</body>

7. 网格布局:grid

	<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
display: grid;
height: 100vh;
}
#div1{
width: 300px;
height: 300px;
background-color: aqua;
justify-self: center;
align-self: center;
}
</style>
<body>
<div id="div1">

</div>
</body>

8.行内块元素 + line-height

	<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
line-height: 100vh;
text-align: center;
}
#div1{
width: 300px;
height: 300px;
background-color: aqua;
display: inline-block;
vertical-align: middle;
line-height: 300px;
}
</style>
<body>
<div id="div1">
<p>666666</p>
</div>
</body>

9.行内块元素 + ::after 伪元素选择器

	<style type="text/css">
* {
margin: 0;
padding: 0;
}

body {
height: 100vh;
line-height: 100vh;
text-align: center;
font-size: 0px;
}

#div1 {
width: 300px;
height: 300px;
display: inline-block;
vertical-align: middle;
background-color: aqua;
}

#div1::after {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
</style>
<body>
<div id="div1">
</div>
</body>

10.行内块元素 + css-table

	<style type="text/css">
* {
margin: 0;
padding: 0;
}

body {
height: 100vh;
width: 100vw;
display: table-cell;
text-align: center;
vertical-align: middle;
}

#div1 {
width: 300px;
height: 300px;
display: inline-block;
background-color: aqua;
}

</style>
<body>
<div id="div1">

</div>
</body>

11. 行内块元素 + table

	<style type="text/css">
* {
margin: 0;
padding: 0;
}

#box {
height: 100vh;
width: 100vw;
text-align: center;
}

#div1 {
width: 300px;
height: 300px;
display: inline-block;
background-color: aqua;
}
</style>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="box">
<div id="div1">

</div>
</td>
</tr>

</table>
</body>

12.行内块元素 + writing-mode

		* {
margin: 0;
padding: 0;
}

#div1 {
height: 100vh;
width: 100vw;
text-align: center;
writing-mode: vertical-lr;
text-align: center;
}
#div2{
display: inline-block;
width: 100%;
writing-mode: horizontal-tb;
text-align: center;
}
#div3 {
width: 300px;
height: 300px;
display: inline-block;
background-color: aqua;
margin: auto;
}

</style>
<body>
<div id="div1">
<div id="div2">
<div id="div3">

</div>
</div>
</div>
</body>
举报

相关推荐

0 条评论