如何将组件对齐到整个页面的中心？答案

【问题标题】：How can I align component to be center in whole page?如何将组件对齐到整个页面的中心？
【发布时间】：2019-11-28 03:10:54
【问题描述】：

我正在制作this site 并在第二页上工作。但是，我无法在整个视口中居中组件。我搜索了很多解决方案，包括position，display:table等。但是，我不知道如何使用这种情况。

.header {
    background-color: #F7F7F7;
    padding: 15px;
}

.header h1 {
    float: left;
}

.header h1 img {
    display: block;
}

.header__nav {
    float: right;
}

.header__nav li {
    float: left;
    display: flex;
    align-items: center;
    height: 38px;
}

.header__nav li a {
    margin-right: 39px;
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
    transition: all 0.5s;
}

.header__nav li a::after {
    content: '';
    width: 0;
    height: 2px;
    background-color: black;
    transition: 0.3s;
    display: block;
}

.header__nav li a:hover::after {
    width: 100%;
}

.header__nav li button:hover::before {
    width: 100%;
}

.contents {
    padding: 150px 100px;
}

.contents__inside {
    font-family: 'Playfair Display', serif;
    text-align: center;
    font-size: 1rem;
}

.contents__inside strong {
    font-style: italic;
    font-size: 1rem;
}

.contents__inside h2 {
    margin-bottom: 10px;
    font-size: 6rem;
    font-weight: bold;
    line-height: 1;
}

.contents__inside img {
    width: 100%;
}

.contents__inside p {
    max-width: 860px;
    font-size: 1.7rem;
    font-weight: 400;
    margin: 0 auto;
}

.info__inside {
    font-family: 'Playfair Display', serif;
    text-align: center;
    font-size: 1rem;
}

.info__inside h2 {
    margin-bottom: 30px;
    font-size: 4rem;
    font-weight: bold;
    line-height: 1;
}

.info__inside p {
    max-width: 860px;
    font-size: 1.7rem;
    font-weight: 400;
    margin: 0 auto 100px;
}

.info__inside img {
    width: 100%;
}

.footer {
    background-color: blue;
}

<header class="header clearfix">
    <div class="l-wrapper">
        <h1><a href="#"><img src="https://pixelicons.com/wp-content/themes/pexelicons/assets/pic/site-logo/logo.png" alt="Logo"></a></h1>
        <nav class="header__nav">
            <ul class="clearfix">
                <li><a href="#">View icons</a></li>
                <li><a href="#">Buy now</a></li>
                <li><button class="menu">menu</button></li>
            </ul>
        </nav>
    </div>
</header>
<section class="contents">
    <div class="l-main">
        <div class="contents__inside">
            <strong>Top quality</strong>
            <h2>ICONS</h2>
            <p>6,500 unique icons in different categories. 
                Drawn by hand and designed for perfection.</p>
            <img src="https://pixelicons.com/wp-content/uploads/2018/01/Home_slide_space.png" alt="">
        </div>
    </div>
</section>
<section class="info">
    <div class="l-main">
        <div class="info__inside">
            <h2>Thousands of icons</h2>
            <p>6,500 unique icons in 3 style color, line and solid.</p>
            <img src="https://pixelicons.com/wp-content/uploads/2018/01/Preview_rd_2.png" alt="">
        </div>
    </div>
</section>
<footer class="footer">
</footer>

有没有合适的方法来解决这个问题？我怎样才能实现网站的原始设计？

编辑

我不想通过使用CSS3属性来练习CSS2来解决

IMAGE that I wanna fix

【问题讨论】：

不清楚的伙伴...
@dgknca 什么不清楚？具体讲
@Martijn 那是水平对齐，但不能覆盖垂直对齐
您想让图标全屏显示吗？还是像你用红色突出显示的图像一样只占半屏？
@Gosi 不，我想让它与原始网站相同。只需访问网站并与我的图像进行比较。同样，我的图像必须占据全屏并居中对齐。

标签： html css center vertical-alignment

【解决方案1】：

如果我理解你，你想将你的项目放在你的 div 中

你可以这样做

.yourDivClassName{
   display: flex; 
   flex-direction: column; 
   flex-wrap: wrap; 
   align-items:center; 
   justify-content: center;
}

<body>
   <div class="yourDivClassName">
       <button>example button</button> 
       <p>example text</p>
       <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRFU7U2h0umyF0P6E_yhTX45sGgPEQAbGaJ4g&usqp=CAU" alt="example image">     
   </div>    
</body>

【讨论】：