css定位和大小代码段集锦

css 有时候会很棘手，尤其是在定位和设置大小的时候。本文包含了我整理的一系列有用的片段，它们使我的生活变得更容易，希望也能帮到你们。

注：每个段落的下方有一个表，说明浏览器的支持情况。

定位

水平和垂直方向

动态调整大小的元素

.parent { position: relative; }

.child {
    position: absolute;

    left: 50%;
    top: 50%

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Chrome	Firefox	Internet Explorer	Opera	Safari
4.0	3.6	9	10.5	3.1

 

 

固定大小的元素：

.parent { position: relative; }

.child {
    position: absolute;

    left: 50%;
    top: 50%

    height: 250px;
    width: 500px;

    /* Translate element based on it's size */
    margin-left: -125px;
    marign-top: -250px;
}

Chrome	Firefox	Internet Explorer	Opera	Safari
1.0	1.0	4.0	7.0	1.0

 

 

随着百分比变化的

.parent { position: relative; }

.child {
    position: absolute;

    height: 50%;
    width: 50%;

    left: 25%; /* (100% - width) / 2 */
    top: 25%;  /* (100% - height) / 2 */
}

Chrome	Firefox	Internet Explorer	Opera	Safari
1.0	1.0	4.0	7.0	1.0

 

 

水平

块级元素的宽度值

.block {
    margin-left: auto;
    margin-right: auto;
}

Chrome	Firefox	Internet Explorer	Opera	Safari
1.0	1.0	6.0	3.5	1.0

 

 

内联和内联块元素

.parent { text-align: center; }
.child { display: inline-block; }

Chrome	Firefox	Internet Explorer	Opera	Safari
1.0	3.0	8.0	7.0	1.0

 

 

垂直

静态父元素中的内联和内联块元素

.parent { line-height: 500px; }

.child {
    display: inline-block;
    vertical-align: middle;
}

Chrome	Firefox	Internet Explorer	Opera	Safari
1.0	3.0	8.0	7.0	1.0

 

 

伪表格

.parent { display: table; }

.child {
    display: table-cell;
    vertical-align: middle;
}

Chrome	Firefox	Internet Explorer	Opera	Safari
1.0	1.0	8.0	7.5	1.0

 

 

尺寸

下面创建一个全尺寸的块元素，但是因为有边框，内边距与外边距而没有成功。盒模型的属性使它没有成为预期的大小。

html { min-height: 100%; }
body { height: 100%; }

.block {
    height: 100%;
    width: 100%;

    -webkit-border-sizing: border-box;
    -moz-border-sizing: border-box;
    border-sizing: border-box;
}

Chrome	Firefox	Internet Explorer	Opera	Safari
1.0	1.0	8.0	7.0	3.0

 

 

 

接下来的代码创建一个全尺寸的块元素为全屏幕，不依赖于边框和内边距。你可以为某个模块设定值来创建空间，比如标头。

html { min-height: 100%; }
body { height: 100%; }

.center {
    position: absolute; /* or fixed */

    bottom: 0;
    left: 0;
    right: 0;
    top: 0; /* top: 50px; would reserve 50px for an header */
}

Chrome	Firefox	Internet Explorer	Opera	Safari
1.0	3.0	7.0	4.0	2.0.2

 

 

 

接下来我们创建一个绝对元素总是等于或大于视窗，基于文档的高度

html {
    position: relative;
    min-height: 100%;
}

body { height: 100%; }

.block {
    min-height: 100%;
    position: absolute;
}

Chrome	Firefox	Internet Explorer	Opera	Safari
1.0	3.0	7.0	4.0	2.0.2

 

 

结论

在这里讨论的所有方法几乎都可以通过嵌套来组合它们。你还知道其他很棒的技巧或有用的代码么？来这里分享吧！

本文最初发表于http://timseverien.nl/2013/10/css-alignment-and-sizing/