一、水平居中
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>
网友评论