css3定位元素居中样式代码教程
第一种方法:
- .element {
- width: 600px; height: 400px;
- position: absolute; left: 50%; top: 50%;
- margin-top: -200px; /* 高度的一半 */
- margin-left: -300px; /* 宽度的一半 */
- }
复制代码 第二种方法:
- .element {
- width: 600px; height: 400px;
- position: absolute; left: 50%; top: 50%;
- transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
- }
复制代码 transform: translateX(-50%); 表示自身元素宽度向左移动50%。
transform: translateY(-50%); 表示自身元素宽度向上移动50%。
|
|