CSS垂直居中对齐

2023-07-16 21:25:51

用CSS有多种方法实现垂直居中对齐。如果已知外部div的高度，不管是否知道内部div的高度，垂直居中实现起来很简单，但如果内部div高度是变量，如文字，垂直居中实现起来就比较复杂了，很可能需要使用hacks。如：

<div id="containingBlock">

      <div><p>This sentence will change in each example</p> </div>

</div>

1、已知高度情况

很简单，直接计算就可以了

#containingBlock {display: block; height: 200px;}

#containingBlock div {height:50px; margin: 75px 0;}

aaarticlea/png;base64,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" alt="" />

2、通过display: table属性布局

通过使用 display: table;和vertical-align: middle可以比较轻松的实现垂直居中，但IE6和IE7并不识别table和table-cell属性，必须使用hacks作为补充。

#containingBlock {display: table; height: 200px; position: relative; overflow: hidden;}

#containingBlock div {display: table-cell; vertical-align: middle;}

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAALUAAADOCAIAAAD31NT8AAAEYUlEQVR4nO3b0XHaSgBAUdeShiiHaqhFpVAK78M2sLB7wX6248mcM5tJbCOxKy6S8Exe/sDay9+eAL/ay+nFMJbj/Y9h3I3TuY+/fRrj19EHRR8UfVD0QdEHRR8UfVD0QdEHRR8UfVD0QdEHRR8UfVD0QdEHRR8UfVD0QdEHRR8UfVD0QdEHRR8UfVD0QdEHRR8UfVD0QdEHRR8UfVD0QdEHRR8UfVD0QdEHRR8UfVD0QdEHRR8UfVD0QdEHRR8UfVD0QdEHRR8UfVD0QdEHRR8UfVD0QdEHRR8UfVD0QdEHRR8UfVD0QdEHRR8UfVD0QdEHRR8UfVD0QdEHRR+UoY+Xl5NhDOOmj7/dK7+IPij6oOiDog/K9/exOxxPx8PuR7b62j38Rb9m8rM+9tswt93heDpt+8s2+2348oEfWOrucDyNPvGEX7KTrxIHbZjnt09xev4YAnmbz6WIj+XxU33876f4NW/ZP3/Wk9lvty/F6UMvxofNry9XgewOx+PhcBXMLJ4h5de1HbbTa1bXS90djucHXr8P7g/Feathb6f54Zgezfke3raezHvZx+Kxl4nst9UK7t/ouZz9dppskuu8fOt2z8NxWq736rBMJzzvY3c4vu//9WxxiWI/pnKexuXfr89znt5lBTcPvw7q7kUfXt2b12L94Gf2cPPw81IXfczXeLXdzdV46tLTejl3s1qv6IllXje7Xu/y5HOe8OL+9Hr1w9+7w3Hxhlsd6Lcvb17Y6eu8Wvb93iaruW1/tYfJ7dXV8V3t5GaN56kcn7soPTg4dwdkucz7Y/a+nOVUY73rqb9vvvr88vbzcw6Xr4d30Gypk+/PzpdXJ9PJND/cx6Pry9DHrffT66M9PzOZceObJ/nIQft/yxzLe269kwkvP9/ut9NpOwxni+Nhf/f+ee78cZvWVyz7s3tYXRCe7WNY/7atri7jszx1/nhY3hP3H+cfXs5HT653PuH17z9es4vPMXX/MV/q1eP32+UhswV8Yx9339jt9+vz7SfvP8a9jfcfDw/O6+M/+Pnl7i5jdaKfr3cx4fj92O2Hp/12fym4OiOt7q3u53087MazXn0k+YY+xnkvbjVyjcPhX3x+GS6g2/bo/DFscNy25ZVrmPrsOj47pk+tdzZhv1//Vzy4Gfokffwr9MHP0wdFH5RJH4YxDP+/gaAPij4o+qDog6IPij4o+qDog6IPij4o+qDog6IPij4o+qDog6IPij4o+qDog6IPij4o+qDog6IPij4o+qDog6IPij4o+qDog6IPij4o+qDog6IPij4o+qDog6IPij4o+qDog6IPij4o+qDog6IPij4o+qDog6IPij4o+qDog6IPij4o+qDog6IPij4o+qDog6IPij4o+qDog6IPij4o+qDog6IPij4o+qDog6IPij4o+qDog6IPij4o+qDog6IPij4o+qDog6IPij4o+qDog6IPij4o+qDogzL0YRj346QNo4crC0UflP8AW5JBsTW3xXoAAAAASUVORK5CYII=" alt="" />

IE6和IE7的CSS

#containingBlock {height: 200px; position: relative; overflow: hidden;}

#containingBlock div { position: absolute; top: 50%;}

#containingBlock div p {position: relative; top: -50%;}

显示为

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAa8AAADNCAIAAACAQmizAAAFNElEQVR4nO3b7W3iQBiFUWq5DVEO1bgWl+JSvD/eBH9gk2STDCPlHI20CwIzZNaPhpi9BIDk8uoJAHThkmS+XAzDMP74eKvhq6MM8EpqCJCoIUBRQ4BEDQGKGgIkaghQ1BAgUUOAooYAiRoCFDUESNQQoKghQKKGAEUNARI1BChqCJCoIUBRQ4BEDQGKGgIkaghQ1BAgUUOAooYAiRoCFDUESNQQoKghQKKGAEUNARI1BChqCJCoIUBRQ4BEDQGKGgIkaghQ1BAgUUOAooYAiRoCFDUESNQQoKghQKKGAEUNARI1BChqCJCoIUBRQ4BEDQGKGgIkaghQ1BAgUUOAooYAiRoCFDUESNQQoKghQKKGAEUNARI1BChqCJCoIUBRQ4BEDQGKGgIkaghQ1BAgUUOAooYAiRoCFDUESNQQoKghQKKGAEUNARI1BChqCJCoIUBRQ4BEDQGKGgIkaghQ1BAgUUOAooYAiRoCFDUESNQQoKghQKKGAEUNARI1BChqCJCoIUBRQ4BkXcPLbHQ6Xv2PBP6EeVPDl5/3xuNQQ2hi3tXw1fNhQw2hGTXsmhpCM2rYNTWEZtSwa2oIzahh19QQmvnlGl6HaZ6Ga5NnvdwvTFsNoZmHGt7GzRl9HaZ5Hm/LE27j5uYHGnTtOkxzmYbr+uZiNeHbeHDnD87k4c1+dnrLxNZ3qyE087g33OTw7eRdyvG1GDba5a1f5ckrPpT9F6fxH9Nbe/8xqyE0c/BJeZXD6zBNw7DK41Eq7/ue9/umYRjfdjf7ELzfWG+RHuNwf9bmaOcbus/l5jMh327dtsc8mcZ2U/cjNbwO09tj1BCaOajhdZjeT/cKyJLA2zaM9yosf6+c3GuxnPy7h6/z+dCoTQ1XR1sf4/DxeZKb2zhP07MGHx21Xu58GptX+6m94SrbagjNHF1Fuefw/bR8/3PZs+zP6vtTDu6fhusuY2dV2z3r7Gjnj8/5L+a2z/3Uh+YP3tTDG/nO9Bab7bcaQjOH15TfMnCP33L7fuaeBeLg/qOt2Orj5UE/vlvDs8fsPuAe7tF2uXpawx+c3sk01RCaOf6GzW2c53HY7ASn4bY+Ub+wN9yHdOP0OuyP52aXv8Mabu/81N7wZ2u4n5UaQjMn3zesvduTa8vPfm94HIjV42/j8pCjKv3O5us27q+LnF69Wd7z8xpufgjrq0T/Mb087l/VEBo6+/b1bZwfftW3P43Prykf92vJxfo67MGW8Us1/Mr3DZfXPSvS+iP8OH60N9wechy/Nb2j/bMaQjP+Z17X1BCaUcOuqSE0o4ZdU0NoRg27pobQjBp2TQ2hmX0Nje6GGkIT87qGr54MB6wLtKGGvbMu0IYa9s66QBtq2DvrAm2oYe+sC7Shhr2zLtCGGvbOukAbatg76wJtqGHvrAu0oYa9sy7Qhhr2zrpAG2rYO+sCbahh76wLtKGGvbMu0IYa9s66QBtq2DvrAm2oYe+sC7Shhr2zLtDGpoZGn+PV/0jgT5jvNXz1TABeSQ0BEjUEKGoIkKghQFFDgEQNAYoaAiRqCFDUECBRQ4CihgCJGgIUNQRI1BCgqCFAooYARQ0BEjUEKGoIkKghQFFDgEQNAYoaAiRqCFDUECBRQ4CihgCJGgIUNQRI1BCgqCFAooYARQ0BEjUEKGoIkKghQFFDgEQNAYoaAiRqCFDUECBRQ4CihgCJGgIUNQRI1BCgqCFAooYARQ0BEjUEKGoIkKghQFFDgEQNAYoaAiRqCFDUECBZ19AwDOOPD7tCgCT5B9HApXLhzK05AAAAAElFTkSuQmCC" alt="" />

IE6和IE7的hack

//Vertical Alignment Table Display Hack

#containingBlock {display:table; height: 200px; position: relative; overflow: hidden; }

#containingBlock div {*position: absolute; top: 50%; display: table-cell; vertical-align: middle;}

#containingBlock p {*position: relative; top: -50%;}

aaarticlea/png;base64,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" alt="" />

补充：如果想实现流式布局，加入如下CSS

html, body, #containingBlock {height: 100%; position:relative; }

#containingBlock div {height: 50%; position: absolute; top: 25%; }

3. 垂直居中所用到的参数

值	描述
length	Raises or lower an element by the specified length. Negative values are allowed
%	Raises or lower an element in a percent of the “line-height” property. Negative values are allowed
baseline	Align the baseline of the element with the baseline of the parent element. This is default
sub	Aligns the element as it was subscript
super	Aligns the element as it was superscript
top	The top of the element is aligned with the top of the tallest element on the line
text-top	The top of the element is aligned with the top of the parent element’s font
middle	The element is placed in the middle of the parent element
bottom	The bottom of the element is aligned with the lowest element on the line
text-bottom	The bottom of the element is aligned with the bottom of the parent element’s font
inherit	Specifies that the value of the vertical-align property should be inherited from the parent element

参考：Vertical Centering With CSS

码农公寓

相关文章