CSS div居中显示,文本居中显示

1、div居中显示

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>div</title>
<meta name="keywords" content="破碎站">
<meta name="description" content="破碎设备">
</head>
<style>
.father{
    width: 100px;
    height: 100px;
    background-color: pink;
    // 这三个属性就可以保证子div居中显示
    display: flex;
    justify-content: center;
    align-items: center
   
}
.son{
    background-color: red;
    width: 40px;
    height: 40px;
}
</style>
<body>

<div class="father">
    <div class="son"> </div>
</div> 

</body>
</html>

2、文本居中

水平方向居中:text-align: center;

垂直居中:line-height: 等于父div的高度;(几乎不用vertical-align: middle这个,咱也不知道为什么)

 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页