ul li 横排居中排列的方法

无序列表的列表项默认情况下是竖着排的，因为li元素是块级元素，会自动分行。那如果要将列表的列表项进行横排，比用无序列表ul元素定义一个导航条。那该怎么办呢？这当中有三个应当被解决的东西，一个是横排本身，另一个就是应当把无序列表项的圆点去掉，第三则是让ul定义的列表居中显示，包括水平居中和垂直居中。方法如下：

前端工程师们，是不是总在加班改样式、调布局？看着别人轻松通过大厂面试，自己却在面试官的 CSS 问题前栽跟头，心里焦虑又无奈？别慌！从今天起，跟着我每日一道 CSS 样式类高频面试题，把这些知识点吃透，下次面试稳拿高薪！

最近，“CSS 布局优化”“响应式设计技巧” 等词在前端圈热度居高不下，这些可都是面试的常客。今天咱们就先从一道超经典的面试题入手 ——如何用 CSS 实现一个水平垂直居中的 div？ 这题看似简单，背后却藏着好几种巧妙解法，面试官就爱拿它考察你的 CSS 功底。

有很多CSS属性，有些人不了解，或者他们了解它们，但是忘记在需要时使用它们。其实，有时候我们用 JavaScript 来实某些交互，CSS 一个属性就能搞定了，这可以大大节约我们编码的时间。

作为前端开发人员，我们经常会遇到这样的事情。所以我问自己，为什么不搞篇文章列出所有那些较少使用但既有用又有趣的 CSS 属性？

在本文中，我将介绍一些不一样的CSS属性，希望能给你带来点新鲜感，废话不多说，让我们开始吧。

进入我的主页，查看更多CSS的分享！

首先呢，先去看文档，了解flex是什么，这里不做赘述。

当然，可以看下面的代码示例，辅助你理解。

一、row

将子元素在水平方向进行布局：

1. 垂直方向靠顶部，水平方向靠左侧

页面布局中最常见的需求就是元素或者文字居中了，但是根据场景的不同，居中也有简单到复杂各种不同的实现方式，本篇就带大家一起了解下，各种场景下，该如何使用 CSS 实现居中

前言

<div id="parent">
<!-- 定义子级元素 -->
<div id="child">居中布局</div>
</div>

通过以下CSS样式代码实现水平方向居中布局效果

前言

css水平垂直居中一直是一个亘古不变的话题，它常常出现在优美的网页上以及各大前端面试当中。说来惭愧，在两年前面试的时候，我完全不知道如何做到水平和垂直均居中的方法，那场面别提有多尴尬了（特想找个地洞钻进去）。现在都2022年了，这些技巧现在已经不是技巧了吧，只是好记性不如烂笔头，还是乖乖记下来吧，得把它玩透才行！

注：文中例子没写明html代码时，使用的是下面结构：

在制作网页的很多时候为了页面美观都需要图片能够做到上下居中、左右居中。网上现实的方式方法也有很多，这里分享我经常使用的一种方法。

实现方法

// HTML代码
<div class="row">
          <div class="col-xs-3">
                    <img src="/public/empty_200x100.png" class="imgbg" style="background-image:url('/uploads/demo.jpg');">
          </div>
</div>

// CSS 代码
<style type="text/css">
          .imgbg{
                    width:100%; 
                    background-color: #ebf2f9; 
                    background-position: center; 
                    background-size:contain; 
                    background-repeat: no-repeat;
          }
</style>

#头条创作挑战赛#

本文同步本人掘金平台的原创翻译：
https://juejin.cn/post/7053763392590315557