css学会布局就好（你经常会使用的css常用布局技巧）
css学会布局就好（你经常会使用的css常用布局技巧）方法1:已知宽度的情况下，使用margin实现看完内联元素的水平居中，我们再看看看块元素的水平居中。相比内联元素，块元素就相对复杂一点，所有代码也多点，但是理解起来也不难.layout-container { text-align: center; }非常简单，一行代码，这样你就可以居中文字了，我们看看效果效果：块元素水平居中
水平居中我们平常写样式可能写的最多的就是水平居中了，话不多说直接上干货。
内联元素水平居中
结构：
<div className="layout-container">
<h2>css常用布局技巧</h2>
</div>
样式：
.layout-container {
text-align: center;
}
非常简单，一行代码，这样你就可以居中文字了，我们看看效果
效果：
块元素水平居中
看完内联元素的水平居中，我们再看看看块元素的水平居中。相比内联元素，块元素就相对复杂一点，所有代码也多点，但是理解起来也不难
方法1:已知宽度的情况下，使用margin实现
结构：
<div className="layout-container">
<div className="horizontal-center"></div>
</div>
样式：
.horizontal-center {
margin: 0 auto;
width: 300px;
height: 600px;
background: gold;
}
效果：
方法2：还是宽度已知的情况，使用定位实现 margin实现
结构：
<div className="layout-container">
<div className="horizontal-center"></div>
</div>
样式：
.layout-container {
padding: 20px;
text-align: center;
position: relative;
}
.horizontal-center {
position: absolute;
left: 50%;
margin-left: -150px;
width: 300px;
height: 300px;
background: gold;
}
这里子元素使用margin-left负值 等于父元素的一半，配合left:50% 便可实现居中
效果:
方法3：使用定位配合css3位移实现
结构：
<div className="layout-container">
<div className="horizontal-center"></div>
</div>
样式：
.layout-container {
padding: 20px;
text-align: center;
position: relative;
}
.horizontal-center {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 300px;
height: 300px;
background: gold;
}
这里原理跟margin差不多，只是我们使用的是不同css属性
效果：
方法4:使用弹性盒实现
结构：
<div className="layout-container">
<h2>css常用布局技巧</h2>
<h3>水平居中:</h3>
<div className="horizontal-center"></div>
</div>
样式：
.layout-container {
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.horizontal-center {
width: 300px;
height: 300px;
background: gold;
}
效果：
方法5：使用grid实现水平居中
结构：
<div className="layout-container">
<h2>css常用布局技巧</h2>
<h3>水平居中:</h3>
<div className="horizontal-center"></div>
</div>
样式：
.layout-container {
padding: 20px;
display: grid;
justify-content: center;
}
.horizontal-center {
width: 300px;
height: 300px;
background: gold;
}
效果：
下一篇我将介绍垂直居中的情况
