水平垂直居中
原文:https://blog.csdn.net/qq_31674679/article/details/81502033
https://blog.csdn.net/liufeifeinanfeng/article/details/78615567
水平:
- 方法一:在父容器上定义固定宽度,margin值设成auto
- 在子元素中将display设置为inline-block,父元素text-algin设置为center
垂直:
1. table-cell
<style type="text/css"> .parent { 200px; height: 200px; display: table-cell; vertical-align: middle; text-align: center; } .child { /*display: inline-block;*/ background-color: orangered; } </style>
2. flex
<style type="text/css"> .parent { 200px; height: 200px; display: flex; justify-content:center; align-items:Center; } .child { /*display: inline-block;*/ background-color: orangered; } </style>
3. 单行文本设置 line-height