CSS设置单行文字水平垂直居中的方法

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单行文字水平垂直居中title>
    <style>
        div {
            /* 给div设置宽高 */
            width: 400px;
            height: 200px;
            margin: 100px auto;
            background-color: red;
            /* 设置行高为盒子的高度 */
            line-height: 200px;
            /* 设置文字水平居中 */
            text-align: center;
        }
    style>
head>
<body>
    <div>我是要水平垂直居中的文字div>
body>
html>

效果图:
CSS设置单行文字水平垂直居中的方法_第1张图片

你可能感兴趣的:(css,前端,javascript)