html 布局

最新推荐文章于 2025-09-14 19:22:28 发布

原创最新推荐文章于 2025-09-14 19:22:28 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html

html小知识专栏收录该内容

0 篇文章

订阅专栏

水平的

align

1，align属性，可以让一个元素内部元素水平居左，居右，居中
比如：

<div style="width: 100%" align="center">
    <div style="background: green;width: 100px;height: 30px;" align="center">123</div>
</div>

结果：
这里写图片描述

垂直的

一、行高（line-height）法

如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如：

<div style="width: 100%;height: 30px;background: green">
    <p style="line-height: 30px">居中了吗</p>
</div>

结果
这里写图片描述

二、模拟表格法

将容器设置为display:table，然后将子元素也就是要垂直居中显示的元素设置为display:table-cell，然后加上vertical-align:middle来实现。

html结构如下：

<div id="wrapper" style="display:table;width:300px;height:300px;background:#000;margin:0 auto;color:red;">
    <div id="cell" style="display:table-cell; vertical-align:middle;">
        <p>测试垂直居中效果测试垂直居中效果</p>
        <p>测试垂直居中效果测试垂直居中效果</p>
    </div>
</div>

结果：
这里写图片描述

三、CSS3的transform来实现

.center-vertical{
  position: absolute;
  top:50%;
  transform:translateY(-50%);
}
.center-horizontal{
  position: absolute;
  left:50%;
  transform:translateX(-50%); 
}

四，相对布局

对 父div 进行相对布局需要用到 postion 属性， 需要将父元素设置为relative, 并将子元素设置为absolute，此时不管进行放大缩小排版不会混乱