在父级元素加3句话，就可以实现子元素水平垂直居中

发布： 2022年1月2日 • 经验百科

css3不定宽高水平居中：

在父级元素加3句话，就可以实现子元素水平垂直居中。

justify-content:center;//子元素水平居中 align-items:center;//子元素垂直居中 display:flex;

推荐这些技术文章：

元素水平垂直居中

flex布局，新版本

//css
body {
display: flex;
justify-content: center;
align-items: center;
}
.box {
background: red;
width: 200px;
height: 200px;
}
//html
<body>
<div class="box">&...

css水平垂直居中的方法

如果div给定了固定宽高:
1.绝对定位+margin

.div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}

2.margin+calc

.div {
margin-left: auto;
margin-right: ...

div水平垂直居中

<div class="parent"> <div class="child"></div></div>
1、定位
div.parent {
position: relative;
}
div.child {
position: absolute;
top: 50%;
left: 50%;
transf...

不固定高宽 div 垂直居中的方法

1.方法一：伪元素和 inline-block / vertical-align（兼容 IE8）

.box-wrap{
text-align: center
}
.box-wrap:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: mi...

css 常用垂直居中

1. grid
<style>
.parent {
display: grid;
place-items: center;
/* 等同align-items: center;justify-items: center;*/
width: 300px;
height: 300px;
border: 1px...

垂直水平居中div

// 第一种：grid布局
<div id="bg_img">
<div>
<input type="text" />
</div>
</div>

// css
#bg_img{
display: grid;
place-items: center;　height:100vh; // 必须设置高...

如何居中一个div

<div class="container">
<div class="content">I'm centered</div>
</di...

子div在父div中垂直居中的几种方法

<div class="parent">
<div class="child"></div>
</div>

div.parent {
display: flex;
justify-content: center;
align-items: center;
}

d...

css子元素水平垂直居中

两个元素父与子（父标签只有一个子标签）的情况下
方法一:（flex 双轴线居中对齐）
父标签样式

{

　display: flex;