CSS布局（水平&垂直居中）
2018-02-27 本文已影响10人
小如99
所有的标签水平居中:
行内标签 和 行内块级标签: 在父标签中设置 text-align: center;
块级标签 : 在自身设置 margin: 0 auto (还有width/height/line-height都要设置);
所有的标签垂直居中:
行内标签 和 行内块级标签 : 在父标签中设置 line-height == 内容高度
块级标签 : position: absolute;（父标签要设置position: relative）
left: 50%;
top:50%;
transform: translate(-50%,-50%);
块级标签
- 独占一行的标签
- 能随时设置宽度和高度（比如div、p、h1、h2、ul、li）
行内标签（内联标签）
- 多个行内标签能同时显示在一行
- 宽度和高度取决于内容的尺寸（比如span、a、label）
行内-块级标签（内联-块级标签）
- 多个行内-块级标签可以显示在同一行
- 能随时设置宽度和高度（比如input、button）
附上代码
<head>
<meta charset="UTF-8">
<title>水平&垂直居中</title>
<!--
所有的标签水平居中:
行内标签 和 行内块级标签: 在父标签中设置 text-align: center;
块级标签 : 在自身设置 margin: 0 auto;
所有的标签垂直居中:
行内标签 和 行内块级标签 : 在福标签中设置 line-height == 内容高度
块级标签 : position: absolute;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
-->
<style>
*{
margin: 0;
padding: 1;
}
#main{
width: 500px;
height: 200px;
background-color: red;
/*让内容居中*/
text-align: center;
/*垂直居中*/
line-height: 200px;
position: relative;
}
span{
background-color: green;
}
.test{
width: 200px;
height: 100px;
line-height: 100px;
background-color: aqua;
/*margin-left: auto;*/
/*margin-right: auto;*/
margin: 0 auto;
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div id="main">
<!--行内标签-->
<span>行内标签</span>
<!--行内块级-->
<button>行内块级标签</button>
<!--块级标签-->
<div class="test">块级标签</div>
<p></p>
<input>
</div>
</body>
</html>
