居中布局
2020-04-19 本文已影响0人
SingleDiego
一、水平居中
1. inline-block + text-align
<body>
<div class="parent">
<div class="child">DEMO</div>
</div>
<style type="text/css">
.child {
display: inline-block;
}
.parent {
text-align: center;
}
</style>
</body>
text-align 属性定义行内元素（例如文字）如何相对它的块父元素对齐，这里设为 center 居中。 详见： text-align 属性
display 属性规定当前元素的框的类型，设为 inline-block 即为行内块元素。 详见：CSS display 属性
2. table + margin
<body>
<div class="parent">
<div class="child">Demo</div>
</div>
<style type="text/css">
.child {
display: table;
margin: 0 auto;
}
</style>
</body>
3. absolute + transform
<body>
<div class="parent">
<div class="child">Demo</div>
</div>
<style type="text/css">
.child {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.parent {
position: relative;
}
</style>
</body>
4. flex + justify-content
<body>
<div class="parent">
<div class="child">Demo</div>
</div>
<style type="text/css">
.parent {
display: flex;
justify-content: center;
}
</style>
</body>
或者使用 margin：
<body>
<div class="parent">
<div class="child">Demo</div>
</div>
<style type="text/css">
.child {
margin: 0 auto;
}
.parent {
display: flex;
}
</style>
</body>
二、垂直居中
1. table-cell + vertical-align
<body>
<div class="parent">
<div class="child">Demo</div>
</div>
<style type="text/css">
.parent {
display: table-cell;
vertical-align: middle;
}
</style>
</body>
2. absolute + transform
<body>
<div class="parent">
<div class="child">Demo</div>
</div>
<style type="text/css">
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.parent {
position: relative;
}
</style>
</body>
3. flex + align-items
<body>
<div class="parent">
<div class="child">Demo</div>
</div>
<style type="text/css">
.parent {
display: flex;
align-items: center;
}
</style>
</body>
三、水平垂直同时居中
1. inline-block + text-align + table-cel + vertical-align
<body>
<div class="parent">
<div class="child">Demo</div>
</div>
<style type="text/css">
.child {
display: inline-block;
}
.parent {
display: table-cell;
text-align: center;
vertical-align: middle;
}
</style>
</body>
2. absolute + translate
<body>
<div class="parent">
<div class="child">Demo</div>
</div>
<style type="text/css">
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.parent {
position: relative;
}
</style>
</body>
3. flex+ justify-content + align-items
<body>
<div class="parent">
<div class="child">Demo</div>
</div>
<style type="text/css">
.parent {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</body>
