html 笔记：前端开发中的“居中”，绝对定位，transform和flex布局：1。 HTML结构

Posted 2021-05-11

/* 外层居中容器的公共样式  */
.box {
  width: 240px;
  height: 300px;
  border: 1px solid #f1f1f1;
  background-color: #F4F3F0;
  margin: 0 auto;
}
/* 内部居中对象的公共样式   */
.box .content {
 /* center target */
 width: 180px;
 height: 100px;
 text-align: center;
 line-height: 100px;
 background-color: #EAE8E3;
 border: 1px solid #aaaaaa;
}

<!--
HTML 结构：
1. div.box 作为外层居中容器
2. div.content 作为内部居中对象
-->
<div class="box">
 <div class="content">
  content
 </div>
</div>