4种使用CSS实现的垂直水平居中技术实例演示

Centering horizontally and vertically in CSS，屏幕居中显示

css3, 居中, 布局

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2617
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/* Generic styles */

body {
    font-family: sans-serif;
    line-height: 1.5;
    margin: 0;
    background-color: #1a1a1a;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: auto;
    -webkit-scroll-snap-points-y: repeat(100%);
    -webkit-scroll-snap-type: mandatory;
    scroll-snap-points-y: repeat(100%);
    scroll-snap-type: mandatory;
}
h1 {
    font-weight: 100;
    position: absolute;
    color: #000;
    box-shadow: 0 0rem 1rem rgba(0, 0, 0, .5);
    background-color: rgba(255, 255, 255, .8);
    left: 50%;
    transform: translate(-50%, 0);
    padding: .5rem 1rem;
    max-width: calc(100% - 2rem);
    text-align: center;
    line-height: 1.2;
}
p {
    margin: 1rem;
    max-width: 34rem;
}
figure {
    margin: 0
}
pre {
    margin: 0
}
pre > code {
    display: block;
    padding: 1rem;
    font-size: 1rem;
    line-height: 1.5;
    background-color: rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 1rem 1rem rgba(0, 0, 0, .5);
    transition: all .3s ease-out;
    outline: 0 solid;
}
pre > code:hover,
pre > code:focus {
    background-color: rgba(0, 0, 0, 1);
}
pre > code::-moz-selection {
    color: #000;
    background-color: #fff;
}
pre > code::selection {
    color: #000;
    background-color: #fff;
}
.lnk {
    color: #fff !important;
}
[class^="container-"] {
    -webkit-scroll-snap-type: mandatory;
    scroll-snap-type: mandatory;
}
[class^="centered-"] {
    /* Optional: Keep inside viewport */
    
    max-width: 100%;
    /* OPTIONAL: */
    /* max-height: 250px; */
    /* Not required but plays nice */
    
    overflow-y: auto;
    box-shadow: 0 0 1rem 1rem rgba(0, 0, 0, .5);
    transition: all .3s ease-out;
}
[class^="centered-"]:hover {
    background-color: #000;
    box-shadow: 0 0 .5rem .25rem rgba(0, 0, 0, .75);
}
/* Required centring styles */

[class^="container-float"] {
    height: 100vh;
    /* Unit irrevelant */
    /* padding: 1rem; /* Optional */
}
[class^="container-float"]::after {
    content: "";
    display: table;
    clear: both;
}
[class^="centered-float"] {
    position: relative;
    float: left;
    /* Collapses box */
    
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* OR */

[class^="container-noFixedHeight"] {
    position: relative;
    min-height: 100vh;
    /* Unit irrevelant */
}
[class^="centered-noFixedHeight"] {
    position: absolute;
    /* Collapses box */
    
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* OR */

[class^="container-absolute"] {
    position: relative;
    height: 100vh;
    /* Unit irrevelant */
}
[class^="centered-absolute"] {
    position: absolute;
    max-width: 50%;
    max-height: 18.5rem;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
/* OR */

.container-flexbox {
    height: 100vh;
    /* Unit irrevelant */
    
    display: flex;
    align-items: center;
    justify-content: center;
}
.centered-flexbox {}
/* OR */

[class^="container-section"] {
    position: relative;
    height: 100vh;
    /* Unit irrevelant */
}
[class^="centered-div"],
[class^="centered-span"] {
    position: absolute;
    /* Collapses box */
    
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
[class^="centered-div"] {
    /* Sets this div to 50% sq */
    
    bottom: 0;
    right: 0;
}
[class^="centered-span"] {
    /*   max-height: 4rem; */
}
/* Pretty-pretties - Not required */
/* Images unsplash.com */

.container-float {
    background-position: center bottom;
    background-size: cover;
    /* Dmitri Popov */
    
    background-image: url(/uploads/161001/lighten1.jpg);
}
.container-noFixedHeight {
    background-position: center;
    background-size: cover;
    /* Michał Grosicki */
    
    background-image: url(/uploads/161001/lighten1.jpg);
}
.container-absolute {
    background-position: center;
    background-size: cover;
    /* Michał Grosicki */
    
    background-image: url(/uploads/161001/lighten1.jpg);
}
.container-flexbox {
    background-position: center bottom;
    background-size: cover;
    /* Dmitri Popov */
    
    background-image: url(/uploads/161001/lighten1.jpg);
}
.container-section {
    background-position: center;
    background-size: cover;
    /* Michał Grosicki */
    
    background-image: url(/uploads/161001/lighten1.jpg);
}
.centered-div {
    border-radius: 50%;
    box-shadow: inset 0 2.5rem 5rem 1.5rem rgba(0, 0, 0, .8), 0 0 1rem .125rem #000;
    background: linear-gradient(to bottom, #342a29 0%, #b4300a 9%, #ffc102 30%, #edddd7 44%, #e8ebf2 50%, #edddd7 56%, #ffc102 70%, #b4300a 87%, #342a29 100%);
}
.centered-div:hover {
    box-shadow: inset 0 2.5rem 5rem 1.5rem rgba(0, 0, 0, .8), 0 0 1rem .125rem #000;
}
.centered-span {
    background-color: #000;
    padding: 1rem;
    font-weight: 700;
    border-radius: 50%;
    box-shadow: 0 0 1rem 2rem #b4300a;
}
.container-float-4 {
    padding: 1rem;
    height: calc(100vh - 2rem);
    background-position: center bottom;
    background-size: cover;
    background-image: url(/uploads/161001/lighten1.jpg);
}
.centered-float-4 {
    background-color: rgba(0, 0, 0, .85);
}

HTML

<div class=centered-float>
        <figure>
            <pre><code spellcheck=false contenteditable>[class^="container-float"] {
  height: 100vh; /* Unit irrevelant */
}
[class^="container-float"]::after {
  content: "";
  display: table;
  clear: both;
}
[class^="centered-float"] {
  position: relative;
  float: left; /* Collapses box */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}</code></pre>
        </figure>
    </div>

</section>

<figure>
            <pre><code spellcheck=false contenteditable>[class^="container-noFixedHeight"] {
  position: relative;
  min-height: 100vh; /* Unit irrevelant */
}
[class^="centered-noFixedHeight"] {
  position: absolute; /* Collapses box */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}</code></pre>
        </figure>

</div>
</section>

<figure>
            <pre><code spellcheck=false contenteditable>[class^="container-absolute"] {
  position: relative;
  height: 100vh; /* Unit irrevelant */
}
[class^="centered-absolute"] {
  position: absolute;
  max-width: 50%;
  max-height: 18.5rem;
  top: 0; left: 0; bottom: 0; right: 0;
  margin: auto;
}</code></pre>
        </figure>

</div>
</section>

<figure>
            <pre><code spellcheck=false contenteditable>.container-flexbox { /* Unsupported in IE9 */
  height: 100vh; /* Unit irrevelant */
  display: flex; /* Collapses box */
  align-items: center;
  justify-content: center;
}
.centered-flexbox {
}</code></pre>
        </figure>

</div>
</section>

<section class=container-section>
    <div class=centered-div>
        <span class=centered-span>
      Centre?
    </span>
    </div>
</section>

<p>More options and variants: <a rel="nofollow" rel="noreferrer" class=lnk href="#" target=_blank title="[new window]">Absolute horizontal vertical centering CSS</a>

</div>
</section>

Centering horizontally and vertically in CSS，屏幕居中显示

css3, 居中, 布局

编辑器支持Emmet

快捷键

Centering horizontally and vertically in CSS，屏幕居中显示

css3, 居中, 布局

使用CSS3 clip-path实现的标题文本水纹波动动画特效

使用Grid.css实现的多列弹性布局在线实例演示

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：