【面试前】css样式垂直/水平/垂直水平居中的方式总结
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">所有样式设置之前，Body元素可能会自带一个margin属性，<span style="color: black;">必须</span>将其覆盖掉。否则有些<span style="color: black;">办法</span><span style="color: black;">运用</span>时可能会<span style="color: black;">引起</span>窗口边缘<span style="color: black;">显现</span>滚动条。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-ff0736508c2c5cbdb35beef8206f1775_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">因此</span><span style="color: black;">起始</span>之前<span style="color: black;">必须</span>：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-04d695aade69c4d903f0a2efa732586a_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">水平居中</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1. 父元素设置text-align:center,子元素为行内元素或设置为行内元素，此时<span style="color: black;">照片</span>和文字都是居中<span style="color: black;">表示</span>的。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-f34485e3264c8b62305582eeea9bc00b_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-174dbb7a43454902d9bdb1078be1c9f4_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2. 当<span style="color: black;">照片</span>居中，<span style="color: black;">照片</span>下面的说明文字在居中位置并且<span style="color: black;">必须</span>左对齐<span style="color: black;">表示</span>的话，设置包裹的容器宽度为<span style="color: black;">照片</span>的宽度，并margin: 0 auto; 此方式<span style="color: black;">针对</span>块级元素和行内元素都适用。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-0f99531c69c90aac71f438bdb86ad6f9_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-b64a45c5e2dac60a5d41a5bd30836dcb_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3. 子元素宽已知px。相<span style="color: black;">针对</span>父元素定位，left偏移50%，左外边距设为<span style="color: black;">自己</span>宽高的负一半，<span style="color: black;">必须</span>设置父元素宽度。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-e59e3075aafb20d57f413d05c1dc27a0_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-8895409c6e5556817b7ec52b725891c0_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">4. transform</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-4c619d366331523dd42d2c2d88da7635_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">5. flex</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-29288dc9dae1f5cf8618d6688ef2c107_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">垂直居中</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1. 父元素display: table-cell;vertical-align: middle;子元素会垂直居中于父元素，<span style="color: black;">必须</span>确定父元素的高度。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">缺点：margin属性失效，<span style="color: black;">由于</span>margin不适用于表格布局；</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">tabel-cell的元素宽高设置为百分比时<span style="color: black;">没</span>效果，<span style="color: black;">倘若</span><span style="color: black;">必须</span>宽度100%，将container宽度设置为<span style="color: black;">极重</span>的一个值；</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">当container<span style="color: black;">必须</span>设置为absolute的时候table-cell失效，<span style="color: black;">由于</span>absolute强制把非flex元素设置为block，<span style="color: black;">处理</span>办法是在外面再套一层容器进行absolute</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-c50f02e2d4bfdd84a5e8071da8bd92ad_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-24bf9aeddd3293a7398095e47e6d37c5_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-49ebe2662a76dd8abd99b4506709be00_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-86d34ee3585b75214e93f4c5026532c0_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2. 子元素高已知px。相<span style="color: black;">针对</span>父元素定位，top偏移50%，上外边距设为<span style="color: black;">自己</span>宽高的负一半，注意父元素<span style="color: black;">必须</span>设置height</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-497a011176b0eb35b07fc9575b7e5eb7_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-23b4e9242faa354a7b4fd62b81184735_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3. transform</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-e8f15318e7c96d90cca177abf7a54c27_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">4. flex</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-012ea43f7bf76e0ad2aca2497039e8f4_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">水平垂直居中</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1. 子元素宽高已知px。相<span style="color: black;">针对</span>父元素定位，top和left偏移50%，左外边距和上外边距各设为<span style="color: black;">自己</span>宽高的负一半；</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">缺点：确定的<span style="color: black;">体积</span>，<span style="color: black;">没</span>法自适应。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-855367b2bcd04e9dd80514ebb699327a_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-bb85959e79d1d7390ab23f8d7429b03d_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2. transform：将左外边距和上外边距负值修改为transform: translate(-50%,-50%),此时<span style="color: black;">拥有</span>自适应的效果。原理：translate里的百分比是<span style="color: black;">按照</span>元素<span style="color: black;">自己</span>宽高计算的。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-174df32f3aa70031c233b89edf72bca5_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-e007dc03c05e17e9d19f9d0c615f888e_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3. 子元素相<span style="color: black;">针对</span>父元素绝对定位，四周为0，并且margin值为auto</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-4fb6094cf5a2d26cd9a745f049e6c384_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">4. 父元素display: table-cell;vertical-align: middle;text-align:center子元素是行内元素</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-62bf507703ab343fe634541446ad6bdc_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-4e2b0dc89f8e051a50b67dc3e47e1eaf_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">5. display: flex;justify-content: center;align-items: center;缺点：不兼容IE浏览器。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="data:image/svg+xml;utf8," style="width: 50%; margin-bottom: 20px;"></div>
回顾历史，我们感慨万千；放眼未来，我们信心百倍。
页:
[1]