我是poetry，点击上方“关注”，每天为你分享前端进阶与个人精进干货。
水平居中方案
方案一：text-align + inline-block
<div id="parent1"> <div class="child">水平居中div>div>#parent1{ text-align: center; background:#ddd; margin-bottom:20px;}#parent1 .child{ display: inline-block; background:#666; color:#fff;}方案二：margin：0 auto
<div id="parent2"> <div class="child">水平居中div>div>#parent2{ text-align: center; background:#ddd; margin-bottom:20px;}#parent2 .child{ display: table; margin: 0 auto; background:#666; color:#fff;}方案三：absolute+transform
<div id="parent3"> <div class="child">水平居中div>div>#parent3{ position: relative; background:#ddd; margin-bottom:20px;}#parent3 .child{ position: absolute; left: 50%; transform: translateX(-50%); background:#666; color:#fff;}方案四：justify-content
<div id="parent4"> <div class="child">水平居中div>div>#parent4{ display: flex; justify-content: center; background:#ddd; margin-bottom:20px;}#parent4 .child{ margin:0 auto; background:#666; color:#fff;}垂直居中方案
方案一： 利用 line-height 实现垂直居中
- 这种方法适用于单行文本垂直居中,如果文本内容太长，出现了换行，换行后的内容会溢出
<div id="example1"> 单行文字垂直居中div>#example1 { height: 100px; line-height: 100px; background: #161616; color: #fff; width: 200px;}方案二 利用 display: table 实现垂直居中
<div id="example2"> <div class="inner">块区域垂直居中div>div>#example2 { height: 100px; background: #161616; color: #fff; width: 400px; overflow: hidden; display: table; margin-bottom:20px;}#example2 .inner{ display: table-cell; vertical-align: middle; height: 50px; background:#999;}方案三 margin 填充 这种方法需要知道内外容器的大小
<div id="example3"> <div class="inner">块区域垂直居中div>div>#example3 { height: 100px; background: #161616; color: #fff; width: 400px; overflow: hidden; margin-bottom:20px;}#example3 .inner{ margin-left: auto; margin-right: auto; margin-top: calc((100px - 50px)/2); height: 50px; background:#999;}方案四：经典 absolute 布局上下文垂直居中
<div id="example4"> <div class="inner">块区域垂直居中div>div>#example4 { width: 400px; height: 100px; background: #161616; color: #fff; position: relative; margin-bottom:20px;}#example4 .inner{ height: 50px; width: 200px; position: absolute; left: 50%; top: 50%; margin-top: -25px; margin-left: -100px; background:#999;}方案五：absolute+transform
<div id="example5"> <div class="inner">块区域垂直居中div>div>#example5 { width: 400px; height: 100px; background: #161616; color: #fff; position: relative; margin-bottom:20px;}#example5 .inner{ position: absolute; left: 50%; top: 50%; background: #999; transform: translateX(-50%) translateY(-50%);}方案六 利用margin：auto 居中
<div id="expample6"> <div class="inner">Content herediv>div>#expample6 { width: 400px; height: 100px; background: #eee; position: relative; margin-bottom:20px;}#expample6 .inner { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 50px; width: 70%; background: #aaa; color:#222;}方案七 利用 Flex布局 居中
<div id="expample7"> <div class="inner">Content herediv>div>#expample7 { width: 400px; height: 100px; background: #eee; display: flex; justify-content: center; align-items: center;}#expample7 .inner { height: 50px; width: 70%; background: #aaa; color:#222;}作者介绍：poetry，专注前端进阶写作与个人精进干货，目前在上市公司负责小程序等相关的研发。