我是poetry,点击上方“关注”,每天为你分享前端进阶与个人精进干货。
<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;}
<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;}
<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;}
<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;}
<div id="example1"> 单行文字垂直居中div>
#example1 { height: 100px; line-height: 100px; background: #161616; color: #fff; width: 200px;}
<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;}
<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;}
<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;}
<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%);}
<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;}
<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,专注前端进阶写作与个人精进干货,目前在上市公司负责小程序等相关的研发。