Teraflopst/css-layout-02.html

## css-layout-02.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS布局</title>
    <style type="text/css">
        .container {
            width: 400px;
            height: 600px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: #FF004E;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>transform 实现垂直水平居中</h2>
        <p>优点：不需要知道宽高，灵活</p>
        <p>缺点：兼容不好，在Mobile设备上建议使用</p>
    </div>
</body>
</html>

## css-layout.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS布局</title>
    <style type="text/css">
        .container {
            width: 400px;
            height: 600px;
            background: #FF004E;
            top: 50%;
            left: 50%;
            position: absolute;
            margin-left: -200px;
            margin-top: -300px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>绝对定位实现垂直水平居中</h2>
        <p>优点：兼容性好</p>
        <p>缺点：需要知道宽高，不够灵活</p>
    </div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>CSS布局</title>
	<style type="text/css">
	.container {
	width: 400px;
	height: 600px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: #FF004E;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<h2>transform 实现垂直水平居中</h2>
	<p>优点：不需要知道宽高，灵活</p>
	<p>缺点：兼容不好，在Mobile设备上建议使用</p>
	</div>
	</body>
	</html>