Html5新增标签与样式及让元素水平垂直居中

HTML5新增标签

HTML5新增了许多标签，以便更好地组织页面结构。下面介绍一些常用的HTML5新增标签：

1. <header> 标签：表示一个文档或者一个区域的头部。
2. <nav> 标签：表示导航链接的一组集合。
3. <section> 标签：表示一个文档或者一个应用中一个独立的区域。

示例代码：

<header>
  <h1>网站标题</h1>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </nav>
</header>
<section>
  <h2>欢迎来到网站</h2>
  <p>这里是一段介绍网站的内容。</p>
</section>

HTML5新增样式

HTML5不仅新增了标签，还新增了一些新的样式。下面我们来介绍一些常用的HTML5新增样式：

1. box-sizing 属性：用来指定计算盒子的大小。
2. text-overflow 属性：用来指定当文本溢出容器时，如何呈现文本。
3. ::selection 伪元素：用来改变文本选中时的样式。

示例代码：

/* 设置所有盒子的大小计算方式为 border-box */
* {
  box-sizing: border-box;
}

/* 当文本溢出容器时，显示省略号 */
p {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 改变文本选中时的样式 */
::selection {
  background-color: #ffa500;
  color: white;
}

让元素水平垂直居中

在网页布局时，让元素水平垂直居中是一种常见的需求。下面介绍一些实现方法：

1. 使用 flex 布局

示例代码：

<div class="wrapper">
  <div class="box">这是一个盒子</div>
</div>

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.box {
  width: 200px;
  height: 200px;
  background-color: cornflowerblue;
}

1. 使用绝对定位和 margin

示例代码：

<div class="wrapper">
  <div class="box">这是一个盒子</div>
</div>

.wrapper {
  position: relative;
  height: 100vh;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background-color: cornflowerblue;
}

以上就是HTML5新增标签与样式以及让元素水平垂直居中的完整攻略。