水平方向に中央に配置
インライン要素Settext
-align：center
ブロックレベル要素
1.最初に幅と高さを定義し、次にマージンの左右の動きに従って中央に
配置します2.中央とマージンへの絶対配置の4つのプロパティを使用します。
3.絶対配置を使用してから、左上の値を50％に設定し、
transform：translate（-50％、-50％）;を使用します
。4。プレイ内の要素をdisplay：inline-block;に設定する必要があります。次に、その親要素はtext-aligin：centerに設定されます;
5. floatを設定します
6.フレキシブルレイアウトの設定
display：flex;
justify-content：center
水平方向と垂直方向の中央に配置
1.弹性布局,为父元素设置
display:flex;
justify-content:center;
align-items:center;
2.position定位
父元素设为fixed,上下左右都为0,margin设置为auto。子元素设为fixed,上下左右都为0,margin设置为auto。
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
3.使用绝对定位
```html
/*此方法是在给定宽高的情况下;*/
.one{
width: 200px;
height: 200px;
background-color: lightblue;
position: absolute;
left: 50%;
top: 50%;
/*margin: -100px 0 0 -100px;*/
transform:translate(-50%,-50%);
}
4.父元素设置display:relative,子元素设置display:absolute;上下左右都为0,margin设置auto
```html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="one">
<div class="two">
</div>
</div>
</body>
<style type="text/css">
.one{
width: 200px;
height: 200px;
background-color: lightblue;
position: relative;
}
.two{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
}
</style>
</html>
5.父元素设置display:flex;子元素margin:auto
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="one">
<div class="two">
</div>
</div>
</body>
<style type="text/css">
.one{
width: 200px;
height: 200px;
background-color: lightblue;
display: flex;
}
.two{
width: 100px;
height: 100px;
background-color: red;
margin: auto;
}
</style>
</html>