元素布局——CSS水平垂直居中

总结一下 元素/文字 水平且垂直居中的方法。

1 . 最常用做法

关键词:宽高固定


<html>
<head>
    <style>
    .wrapper {
        position: relative;
        width: 400px;
        height: 400px;
        border: 1px solid #aaa;
    }
    .content {
        position: absolute;
        width: 200px;
        height: 200px;
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top: -100px;
        background-color: #0f0;
    }
    style>
head>
<body>
<div class="wrapper">
    <div class="content">div>
div>
body>
html>

兼容性:所有浏览器

2 . 表格布局

关键词:文字 图片


<html>
<head>
    <style>
    .wrapper {
        display: table;
        height: 400px;
        width: 400px;
        border: 1px solid #aaa;
    }
    .content {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    style>
head>
<body>
    <div class="wrapper">
        <div class="content">contentdiv>
    div>
body>
html>

兼容性:ie8+/Chrome/Firefox/Opera/Safari

3 . CSS3布局

关键词:移动端 %布局


<html>
<head>
    <style>
    .wrapper {
        position: relative;
        width: 400px;
        height: 400px;
        border: 1px solid #aaa;
    }
    .content {
        position: absolute;
        width: 20%;
        height: 20%;
        top: 50%;
        left: 50%;
        background-color: #0f0;
        transform: translateX(-50%) translateY(-50%);
        -o-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
    }
    style>
head>
<body>
<div class="wrapper">
    <div class="content">div>
div>
body>
html>

兼容性:ie9+/Chrome/Firefox/Opera/Safari

4 . 占位布局

关键词:高度固定


<html>
<head>
    <style>
    .wrapper {
        width: 400px;
        height: 400px;
        border: 1px solid #aaa;
    }
    .hidden {
        float: left;
        height: 50%;
        margin-bottom: -150px;/*为子元素高度一半*/
    }
    .content {
        clear: both;
        width: 300px;
        height: 300px;
        margin: 0 auto;
        background-color: #0f0;
    }
    style>
head>
<body>
    <div class="wrapper">
        <div class="hidden">div>
        <div class="content">div>
    div>
body>
html>

兼容性:ie8+/Chrome/Firefox/Opera/Safari
原理:隐藏的div占据了半个父元素位置,并使需要居中的元素上移半个自身高度

5 . margin:auto布局

关键词:%布局


<html>
<head>
    <style>
    .wrapper {
        position: relative;
        width: 400px;
        height: 400px;
        border: 1px solid #aaa;
    }
    .content {
        position:absolute;
        left:0;
        top:0;
        right:0;
        bottom:0;
        margin:auto;
        height:20%;
        width:20%;
        background-color: #0f0;
    }
    style>
head>
<body>
    <div class="wrapper">
        <div class="content">div>
    div>
body>
html>

兼容性:ie7+/Chrome/Firefox/Opera/Safari
原理:.content被设置为距四边均为0,但因为它有高度,其实并不能和四周都间距为 0,因此 margin:auto会使它居中

——前端的坑自己慢慢趟,折过的骨会更强健。

你可能感兴趣的:(HTML/CSS)