1。当元素被高度声明时在父容器中居中:绝对居中方法
<div class="parent"><div class="absolute-center"></div></div>.parent { position: relative;}.absolute-center { position: absolute; ***rgin: auto; top: 0; right: 0; bottom: 0; left: 0; height: 70%; width: 70%;}优点：1.跨浏览器，包括 IE8-102.无需其他冗余标记，CSS 代码量少3.完美支持图片居中4.宽度高度可变，可用百分比缺点：1.必须声明高度
2.负的外部边距:当元素的宽度和高度固定时。将***rgin-top/***rgin-left设置为宽度和高度的倒数，top:50%；左侧:50%
<div class="parent"><div class="negative-***rgin-center"></div></div>.parent { position: relative;}.negative-***rgin-center { position: absolute; left: 50%; top: 50%; ***rgin-left: -150px; ***rgin-top: -150px; height: 300px; width: 300px;}优点：良好的跨浏览器特性，兼容 IE6-7代码量少缺点：不能自适应，不支持百分比尺寸和 min-/***x-属性设置内容可能溢出容器边距大小域与 padding，box-sizing 有关
3。CSS3转换居中:
<div class="parent"><div class="transform-center"></div></div>.parent { position: relative;}.transform-center { position: absolute; left: 50%; top: 50%; ***rgin: auto; width: 50%; -webkit-transform: translate(-50%， -50%); -moz-transform: translate(-50%， -50%); transform: translate(-50%, -50%);}优点：内容高度可变代码量少缺点：IE8 不支持属性需要浏览器厂商前缀可能干扰其他 transform 效果
4。表格单元格中心:
<div class="center-container is-table"><div class="table-cell"><div class="center-block"></div></div></div>.center-container.is-table { display: table;}.is-table .table-cell { display: table-cell; vertical-align: middle;}.is-table .center-block { width: 50%; ***rgin: 0 auto;}优点：高度可变内容溢出会将父元素撑开跨浏览器兼容性好缺点：需要额外 html 标记
本文来自青灯黄卷伴你久投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/610196.html
微信扫一扫 
