code前端网CSS 布局指南：居中相关布局
1.1 水平居中布局
渲染如下：
选项 1. inline-block❙❙❙‶❙❙ 分析： 元素其中 显示设置为inline-block，它具有文本元素的属性，其父元素可以通过设置text-对齐属性text-♶align来控制其内联对齐方式， 对齐文本：以的中心为水平对齐
注：文本对齐方式会将元素自身的文本属性插入到中心，需要设置文字对齐自己去覆盖
<style>
.wrap {
width: 100%;
height: 200px;
background-color: aqua;
text-align: center;
}
.content {
width: 200px;
height: 200px;
background-color: blueviolet;
display: inline-block;
}
</style>
<body>
<div class="wrap">
<div class="content"></div>
</div>
</body>
复制代码解决方案2.定位+变换
分析：父级开启定位后（都可用，绝对，绝对），子元素设置为absolute后找到绝对，将
<style>
.wrap {
width: 100%;
height: 200px;
background-color: aqua;
text-align: center;
}
.content {
width: 200px;
height: 200px;
background-color: blueviolet;
display: inline-block;
}
</style>
<body>
<div class="wrap">
<div class="content"></div>
</div>
</body>
复制代码left设置为50%♷❀，然后使用：❀50%♷ (-50% )移动相反方向的子元素移动自身宽度的50%，完成水平居中。
注：父元素是否在文档流之外并不影响子元素的水平居中效果，但 兼容性问题 注：对于这里的子元素，可以将 效果图如下： 这个方案和之前方案一的居中原理相同，我就不去了详细说明 分析：集合元素❙❙- 分析：集合元素❙❙ 有 注意： 效果图如下： 我们总结了一些水平和垂直居中的方法，所以水平和垂直居中没有什么特别的，直接上代码即可： ：使用 作者：catboytransform为css3、css3、转换<style>
.wrap {
position: relative;
width: 100%;
height: 200px;
background-color: aqua;
}
.content {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 200px;
background-color: blueviolet;
}
</style>
<body>
<div class="wrap">
<div class="content"></div>
</div>
</body>
复制代码选项 3。 ?距离效应。
display设置为block或‷。如果子元素位于文档流之外（浮动、定位），则会导致 margin 属性的值无效。<style>
.wrap {
width: 100%;
height: 200px;
background-color: aqua;
}
.content {
width: 200px;
height: 200px;
background-color: blueviolet;
display: table;
margin: 0 auto;
}
</style>
<body>
<div class="wrap">
<div class="content"></div>
</div>
</body>
复制代码1.2 垂直居中布局
方案一.放置+
变换<style>
.wrap {
position: relative;
width: 200px;
height: 600px;
background-color: aqua;
}
.content {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 200px;
height: 200px;
background-color: blueviolet;
}
</style>
<body>
<div class="wrap">
<div class="content"></div>
</div>
</body>
复制代码 解决方案 2.
显示：表格单元格 + 垂直对齐 td基本行为，其子元素的布局与文本元素类似。可以在父元素上使用 vertical-align: middle; 来实现子元素的垂直居中。 vertical-align属性是继承的，这会导致父元素中的文本垂直居中。 <style>
.wrap {
display: table-cell;
vertical-align: middle;
width: 200px;
height: 600px;
background-color: aqua;
}
.content {
width: 200px;
height: 200px;
background-color: blueviolet;
}
</style>
<body>
<div class="wrap">
<div class="content"></div>
</div>
</body>
复制代码1.3 水平和垂直居中分布
选项一。位置+
转型<style>
.wrap {
position: relative;
width: 1200px;
height: 800px;
background-color: aqua;
}
.content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background-color: blueviolet;
}
</style>
<body>
<div class="wrap">
<div class="content"></div>
</div>
</body>
复制代码选项二。结合水平布局选项 3 和垂直布局选项 2
<style>
.wrap {
display: table-cell;
vertical-align: middle;
width: 1200px;
height: 800px;
background-color: aqua;
}
.content {
margin: 0 auto;
width: 200px;
height: 200px;
background-color: blueviolet;
}
</style>
<body>
<div class="wrap">
<div class="content"></div>
</div>
</body>
复制代码1.4 使用
flex 将布局解析到中心 将使水平和垂直居中 变得非常容易。默认情况下 align-items: center垂直居中（横轴对齐），justify-content: center水平居中（长轴对齐） 注意：浏览器兼容性问题需要 . <style>
.wrap {
display: flex;
align-items: center;
justify-content: center;
width: 1200px;
height: 800px;
background-color: aqua;
}
.content {
width: 200px;
height: 200px;
background-color: blueviolet;
}
</style>
<body>
<div class="wrap">
<div class="content"></div>
</div>
</body>
链接：https://juejin.im/post/5e91a8a56fb9a03c9037928f
来源：掘金
商业转载请联系作者获得许可。非商业转载请注明来源。
版权声明
本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。
