css center元素,CSS基础知识 - 7种常用元素居中方法

CSS

语言：

CSSSCSS

确定

body {

min-width: 320px;

overflow-x: hidden;

}

body h1 {

padding-bottom: 5px;

border-bottom: 4px solid #333;

}

body img {

max-width: 100%;

}

.text-center {

text-align: center;

}

.vertical-middle {

vertical-align: middle;

display: table-cell;

}

#wrapper {

padding: 20px;

width: 320px;

margin: 0 auto;

}

.block {

margin-bottom: 40px;

}

.block h2.block-head {

border-bottom: 1px solid #ccc;

}

.block .image-block {

background: #f1f1f1;

padding: 20px;

}

.block-2 .image-block {

width: 100%;

margin: 0 auto;

}

.block-3 .image-block {

display: table;

width: 100%;

}

.block-3 .image-block .vertical-middle {

/* adding height to demo vertical alignment */

height: 400px;

}

.block-3 .image-block img {

height: auto;

}

.block-4 .image-block {

position: relative;

/* this method needs a specified height */

min-height: 400px;

}

.block-4 .image-block img {

position: absolute;

height: auto;

top: 0;

left: 0;

bottom: 0;

right: 0;

/* this method needs img width to be specified */

width: 150px;

overflow: auto;

margin: auto;

}

.block-5 .image-block {

position: relative;

/* this method requires min height*/

min-height: 400px;

}

.block-5 .image-block img {

position: absolute;

top: 50%;

left: 50%;

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

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

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

}

.block-6 .image-block {

position: relative;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

}

.block-7 .image-block {

position: relative;

min-height: 400px;

}

.block-7 .image-block img {

width: 150px;

height: auto;

position: absolute;

/* 75px is the 50% of the image's width (150)*/

top: calc(50% - 75px);

left: calc(50% - 75px);

}