html的水平居中标签(html垂直居中怎么设置)

新劵 • 2023年 12月 15日 11:15 • 用户体验 • 阅读 77

1.元素高度声明的情况下在父容器中居中：绝对居中法class=\"parent\">class=\"absolute-center\">.parent{position:relative;}.a

1. 元素高度声明的情况下在父容器中居中：绝对居中法

<div class=\"parent\"> <div class=\"absolute-center\">

.parent { position: relative;}.absolute-center { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; height: 70%; width: 70%;}优点：1.跨浏览器，包括 IE8-102.无需其他冗余标记，CSS 代码量少3.完美支持图片居中4.宽度高度可变，可用百分比缺点：1.必须声明高度

2. 负外边距：当元素宽度高度为固定值时。设置 margin-top/margin-left 为宽度高度一半的相反数，top:50%;left:50%

<div class=\"parent\"> <div class=\"negative-margin-center\">

.parent { position: relative;}.negative-margin-center { position: absolute; left: 50%; top: 50%; margin-left: -150px; margin-top: -150px; height: 300px; width: 300px;}优点：良好的跨浏览器特性，兼容 IE6-7代码量少缺点：不能自适应，不支持百分比尺寸和 min-/max-属性设置内容可能溢出容器边距大小域与 padding，box-sizing 有关

3. CSS3 Transform 居中：

<div class=\"parent\"> <div class=\"transform-center\">.parent { position: relative;}.transform-center { position: absolute; left: 50%; top: 50%; margin: auto; width: 50%; -webkit-transform: translate(-50%， -50%); -moz-transform: translate(-50%， -50%); transform: translate(-50%, -50%);}优点：内容高度可变代码量少缺点：IE8 不支持属性需要浏览器厂商前缀可能干扰其他 transform 效果

4. table-cell 居中：

<div class=\"center-container is-table\"> <div class=\"table-cell\"> <div class=\"center-block\"> .center-container.is-table { display: table;}.is-table .table-cell { display: table-cell; vertical-align: middle;}.is-table .center-block { width: 50%; margin: 0 auto;}优点：高度可变内容溢出会将父元素撑开跨浏览器兼容性好缺点：需要额外 html 标记