CSS垂直居中技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42707967/article/details/115799523

一.css如何设置元素在垂直居中

当我们希望容器中的元素在垂直方向进行剧中时，我们通常可以通过如下两种方式实现，例如如下案例:

1.1 使用position定位

在这里插入图片描述
我们希望输入框和点击按钮在长方形容器进行垂直居中，这时候进行如下设置

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="ie=Edge">
        <title>test</title>
        <style>
            #out {
                position: relative;
            }
            #out span {
                position: absolute;
                top:50%;
                left:0;
                transform: translate(0, -50%)
            }
        </style>
    </head>
    <body>
        <div id="container" style="width: 60%;height: 100px;margin: 50px auto;">
            <div id="out" style="width: 60%;height: 40px;border: 1px solid #000;">
                <span>
                    <label for="one"></label>
                    <input type="text" id="one" placeholder="请输入内容">
                    <button style="padding: 5px auto;">点击</button>
                </span>
            </div>
        </div>
    </body>
    <script>
    </script>
</html>