html float字居中,css-float和居中问题

参考资料

笔记

父容器清除浮动，避免父元素的塌陷，即内部元素都发生浮动后，高度为0.

Box 1

Box 2

Box 3

.box-set:before,

.box-set:after {

display: table;

content: "";

}

.box-set:after {

clear: both;

}

.box-set {

*zoom: 1;

}

.box-set {

background: red;

}

.box {

background: #8ec63f;

margin-top: 20px;

height: 100px;

float: left;

margin: 10px;

width: 200px;

box-shadow: 0 0 500px #000;

}

效果图.png

水平居中

inline元素在block父元素内时:

.center-children {

text-align: center;

}

下面是一个例子：

This text is centered.

One

Two

Three

Four

body {

background: #f06d06;

}

header, nav {

text-align: center;

background: white;

margin: 20px 0;

padding: 10px;

}

nav a {

text-decoration: none;

background: #333;

border-radius: 5px;

color: white;

padding: 3px 8px;

}

效果.png

如果是block元素时：

.center-me {

margin: 0 auto;

width: 200px;// 必须加宽度，否则block元素会撑满宽度，没必要居中了

}

下面是一个例子：

I'm a block level element and am centered.

body {

background: #f06d06;

}

main {

background: white;

margin: 20px 0;

padding: 10px;

}

.center {

margin: 0 auto;

width: 200px;

background: black;

padding: 20px;

color: white;

}

效果.png

如果是多个block元素排列成一行并居中时：

第一种做法是改变display的类型：

I'm an element that is block-like with my siblings and we're centered in a row.

I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings

do.

I'm an element that is block-like with my siblings and we're centered in a row.

body {

background: #f06d06;

font-size: 80%;

}

main {

background: white;

margin: 20px 0;

padding: 10px;

}

main div {

background: black;

color: white;

padding: 15px;

max-width: 125px;

margin: 5px;

}

.inline-block-center {

text-align: center;

}

.inline-block-center div {

display: inline-block;

text-align: left;

}

效果.png

第二种是使用flex：

I'm an element that is block-like with my siblings and we're centered in a row.

I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings

do.

I'm an element that is block-like with my siblings and we're centered in a row.

.flex-center {

display: flex;

justify-content: center;

}

效果与上图一致

垂直居中

如果是inline元素且在一行中垂直居中

只要把该元素的上下padding设置为一样即可，

.link {

padding-top: 30px;

padding-bottom: 30px;

}

例如:

We're

Centered

Bits of

Text

body {

background: #f06d06;

font-size: 80%;

}

main {

background: white;

margin: 20px 0;

padding: 50px;

}

main a {

background: black;

color: white;

padding: 40px 30px;

text-decoration: none;

}

效果如下图：

效果.png

如果因为各种原因不能使用padding设置，比如内容无法在一行内显示，则可以使用把line-height等于height即可：

.center-text-trick {

height: 100px;

line-height: 100px;

white-space: nowrap;

}

例如：

I'm a centered line.

body {

background: #f06d06;

font-size: 80%;

}

main {

background: white;

margin: 20px 0;

padding: 40px;

}

main div {

background: black;

color: white;

height: 100px;

line-height: 100px;

padding: 20px;

width: 50%;

white-space: nowrap;

}

效果：

效果.png

如果是inline元素且在多行中垂直居中

第一种方法：

I'm vertically centered multiple lines of text in a real table cell.

body {

background: #f06d06;

font-size: 80%;

}

table {

background: white;

width: 240px;

border-collapse: separate;

margin: 20px;

height: 250px;

}

table td {

background: black;

color: white;

padding: 20px;

border: 10px solid white;

/* default is vertical-align: middle; */

}

第二种方法：

I'm vertically centered multiple lines of text in a CSS-created table layout.

body {

background: #f06d06;

font-size: 80%;

}

.center-table {

display: table;

height: 250px;

background: white;

width: 240px;

margin: 20px;

}

.center-table p {

display: table-cell;

margin: 0;

background: black;

color: white;

padding: 20px;

border: 10px solid white;

vertical-align: middle;

}

第三种方法：

I'm vertically centered multiple lines of text in a flexbox container.

body {

background: #f06d06;

font-size: 80%;

}

div {

background: white;

width: 240px;

margin: 20px;

}

.flex-center {

background: black;

color: white;

border: 10px solid white;

display: flex;

flex-direction: column;

justify-content: center;

height: 200px; // 必须有一个固定的高度

resize: vertical;

overflow: auto;

}

.flex-center p {

margin: 0;

padding: 20px;

}

效果如下：

效果.png

如果以上都不能使用：

.ghost-center {

position: relative;

}

.ghost-center::before {

content: " ";

display: inline-block;

height: 100%;

width: 1%;

vertical-align: middle;

}

.ghost-center p {

display: inline-block;

vertical-align: middle;

}

例如：

I'm vertically centered multiple lines of text in a container. Centered with a ghost pseudo element

body {

background: #f06d06;

font-size: 80%;

}

div {

background: white;

width: 240px;

height: 200px;

margin: 20px;

color: white;

resize: vertical;

overflow: auto;

padding: 20px;

}

.ghost-center {

position: relative;

}

.ghost-center::before {

content: " ";

display: inline-block;

height: 100%;

width: 1%;

vertical-align: middle;

}

.ghost-center p {

display: inline-block;

vertical-align: middle;

width: 190px;

margin: 0;

padding: 20px;

background: black;

}

如果是block元素且已知元素高度

不知道高度的情况很常见，但是如果知道高度，可以：

.parent {

position: relative;

}

.child {

position: absolute;

top: 50%;

height: 100px;

margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */

}

例如：

I'm a block-level element with a fixed height, centered vertically within my parent.

body {

background: #f06d06;

font-size: 80%;

}

main {

background: white;

height: 300px;

margin: 20px;

width: 300px;

position: relative;

resize: vertical;

overflow: auto;

}

main div {

position: absolute;

top: 50%;

left: 20px;

right: 20px;

height: 100px;

margin-top: -70px;

background: black;

color: white;

padding: 20px;

}

效果如下：

效果.png

如果是blobk元素且不知道元素高度

如下：

.parent {

position: relative;

}

.child {

position: absolute;

top: 50%;

transform: translateY(-50%);

}

例如：

I'm a block-level element with an unknown height, centered vertically within my parent.

body {

background: #f06d06;

font-size: 80%;

}

main {

background: white;

height: 300px;

margin: 20px;

width: 300px;

position: relative;

resize: vertical;

overflow: auto;

}

main div {

position: absolute;

top: 50%;

left: 20px;

right: 20px;

background: black;

color: white;

padding: 20px;

transform: translateY(-50%);

resize: vertical;

overflow: auto;

}

如果可以使用flexbox

.parent {

display: flex;

flex-direction: column;

justify-content: center;

}

例如：

I'm a block-level element with an unknown height, centered vertically within my parent.

body {

background: #f06d06;

font-size: 80%;

}

main {

background: white;

height: 300px;

width: 200px;

padding: 20px;

margin: 20px;

display: flex;

flex-direction: column;

justify-content: center;

resize: vertical;

overflow: auto;

}

main div {

background: black;

color: white;

padding: 20px;

resize: vertical;

overflow: auto;

}

同时水平和垂直居中

如果元素的宽高是固定的

.parent {

position: relative;

}

.child {

width: 300px;

height: 100px;

padding: 20px;

position: absolute;

top: 50%;

left: 50%;

margin: -70px 0 0 -170px;

}

例如：

I'm a block-level element a fixed height and width, centered vertically within my parent.

body {

background: #f06d06;

font-size: 80%;

padding: 20px;

}

main {

position: relative;

background: white;

height: 200px;

width: 60%;

margin: 0 auto;

padding: 20px;

resize: both;

overflow: auto;

}

main div {

background: black;

color: white;

width: 200px;

height: 100px;

margin: -70px 0 0 -120px;

position: absolute;

top: 50%;

left: 50%;

padding: 20px;

}

效果：

效果.png

如果不知道元素的宽高

.parent {

position: relative;

}

.child {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

例如:

I'm a block-level element of an unknown height and width, centered vertically within my parent.

body {

background: #f06d06;

font-size: 80%;

padding: 20px;

}

main {

position: relative;

background: white;

height: 200px;

width: 60%;

margin: 0 auto;

padding: 20px;

resize: both;

overflow: auto;

}

main div {

background: black;

color: white;

width: 50%;

transform: translate(-50%, -50%);

position: absolute;

top: 50%;

left: 50%;

padding: 20px;

resize: both;

overflow: auto;

}

效果：

效果.png

如果可以用flexbox

.parent {

display: flex;

justify-content: center;

align-items: center;

}

例如：

I'm a block-level-ish element of an unknown width and height, centered vertically within my parent.

body {

background: #f06d06;

font-size: 80%;

padding: 20px;

}

main {

background: white;

height: 200px;

width: 60%;

margin: 0 auto;

padding: 20px;

display: flex;

justify-content: center;

align-items: center;

resize: both;

overflow: auto;

}

main div {

background: black;

color: white;

width: 50%;

padding: 20px;

resize: both;

overflow: auto;

}