关于居中布局
2019-11-12 本文已影响0人
Kailee
1.水平居中
方案一：inline-block + text-align
<style>
.parent {
background: lightblue;
text-align: center;
max-width: 300px;
}
.child {
background: lightslategrey;
display: inline-block;
text-align: left;
}
</style>
<body>
<div class="parent">
<div class="child">我们想左对齐<br/>我们想左对齐123<br/>我们想左对齐123<br/></div>
</div>
</body>
效果图如下
image.png
解读：因为当 text-align: center; 设置在一个块级元素上的时候可以对里面的 inline 级别的元素起作用，child 我们把 display 设置成了 inline-block, 所以父元素设置了 center 自然就居中了。
注：由于 text-align 会继承的，所以子元素里的 text-align 也是 center 了，那如果我想设置子元素里的文本是左对齐的，那么只要将 child 里设置 text-align: left; 覆盖即可。
方案二：table + margin
<style>
.parent {
background: lightblue;
max-width: 300px;
}
.child {
background: lightslategrey;
display: table;
margin: 0 auto;
}
</style>
<body>
<div class="parent">
<div class="child">我们想左对齐<br/>我们想左对齐123<br/>我们想左对齐123<br/></div>
</div>
</body>
效果图同方案一
解读：当设置为 table 时，如果没有对 table 设置宽度 100%，那么宽度就是和内容一样；table 另一个特性就是可以应用 margin 属性，所以设置了 margin: 0 auto; 即可实现。
方案三：absolute + transform
<style>
.parent {
background: lightblue;
width: 300px;
height: 80px;
position: relative;
}
.child {
background: lightslategrey;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
</style>
<body>
<div class="parent">
<div class="child">我们想左对齐<br/>我们想左对齐123<br/>我们想左对齐123<br/></div>
</div>
</body>
方案四：flex + justify-content
<style>
.parent {
background: lightblue;
width: 300px;
display: flex;
justify-content: center;//或者不用这个，在 child 里设置 margin: 0 auto; 也行
}
.child {
background: lightslategrey;
margin: 0 auto;//或者不用这个，在 parent 里设置 justify-content: center; 也行
}
</style>
<body>
<div class="parent">
<div class="child">我们想左对齐<br/>我们想左对齐123<br/>我们想左对齐123<br/></div>
</div>
</body>
2. 垂直居中
方案一：table-cell + vertical-align
<style>
.parent {
background: lightblue;
height: 200px;
display: table-cell;
vertical-align: middle;
}
.child {
background: lightslategrey;
}
</style>
<body>
<div class="parent">
<div class="child">
Demo
</div>
</div>
</body>
效果图：
image.png
方案二：absolute + transform
<style>
.parent {
background: lightblue;
height: 200px;
text-align: center;
max-width: 80px;
position: relative;
}
.child {
background: lightslategrey;
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
<body>
<div class="parent">
<div class="child">
Demo
</div>
</div>
</body>
方案三：flex + align-items
<style>
.parent {
background: lightblue;
height: 200px;
text-align: center;
max-width: 80px;
display: flex;
align-items: center;
}
.child {
background: lightslategrey;
width: 100%;
}
</style>
<body>
<div class="parent">
<div class="child">
Demo
</div>
</div>
</body>
3. 水平垂直居中（结合即可）
方案一：inline-block + text-align + table-celln + vertical-align
<style>
.parent {
background: lightblue;
height: 200px;
width: 300px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.child {
background: lightslategrey;
width: 80px;
display: inline-block;
}
</style>
<body>
<div class="parent">
<div class="child">
Demo
</div>
</div>
</body>
方案二：absolute + transform
<style>
.parent {
background: lightblue;
height: 200px;
width: 300px;
position: relative;
}
.child {
background: lightslategrey;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
<body>
<div class="parent">
<div class="child">
Demo
</div>
</div>
</body>
方案三：table-cell + vertical-align + align-items
<style>
.parent {
background: lightblue;
height: 200px;
width: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.child {
background: lightslategrey;
}
</style>
<body>
<div class="parent">
<div class="child">
Demo
</div>
</div>
</body>
