HTML/CSS常见的几种水平居中、垂直居中、水平居中方式

一、水平居中

1.第一种方式

在css中使用text-align和display属性

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>第一种居中方式</title>
<style>
.parent{background:darkgray;text-align:center;}
.child{width:200px;height:200px;background:darkred;display:inline-block;}
</style>
</head>
<body><div class="parent"><div class="child"></div></div>
</body>
</html>

效果：
在这里插入图片描述

     text-align的属性值一般常用的三种：1.left    左对齐2.right  右对齐3.center  居中对齐

这里将其父div设置对齐方式为center，如果不给子级div加display属性时，子级div并不会居中，居中的将会是子级div的文本和父级div的文本，如果要将子级div居中就需要设置其display：inline-block；

display的属性值一般常用的三种：
1. inline 内联（text-align属性有效）
2. block 块级
3. inline-block 内联+块级（text-align属性有效）
*当子级div的display设置成inline属性时，子级div的宽度和高度将会失效，但div可以实现居中效果，只是宽度和高度将无法设置
*当子级div的display属性设置成line-block属性时，子级div的宽度和高度有效，一般常用这个属性，如果不给div设置display属性时，将会默认是block块级元素
注意：text-align属性具有继承性，也就是说当父级设置了这个属性时，其所有子级(不管多少层子级标签)的文本内容将会默认是你所设置的对齐方式。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>第一种居中方式</title><style>.parent{background: darkgray;text-align: center;}.child{width: 200px;height: 200px;background: darkred;display: inline-block;}.test{width: 150px;background: forestgreen;}</style>
</head>
<body><div class="parent"><div class="child"><div class="test">居中的文本</div></div></div>