css中如何让div水平居中(上)

端面试题中经常会出现这个问题，接下来，小郭就带你揭秘几种最常见的答案。

关注我！了解更多前端干货！

先设定一个html结构以及css的基本样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>如何让div实现水平居中</title>
</head>
<body>
    <div id="dad">
        <div id="son"></div>
    </div>
</body>
</html>

css样式

#dad{
    width: 400px;
    height: 200px;
    border: 3px solid green;
    margin: 30px auto;
}
#son{
    width: 100px;
    height: 100px;
    background: purple;
}

方法一：纯margin

/*css处添加下面代码*/
#son{
		margin:0 auto;
}

方法二：position定位

/*css处添加下面代码*/
#dad{
    position: relative;
}
#son{
    position: absolute;
		left:50%;
    margin-left:-50px;
}
/*注意：margin-left是负值，是#son这个div宽的一半*/ç

方法三：flexbox

/*css处添加下面代码*/
#dad{
    display: flex;
    justify-content: center;    
}
/*注意：弹性盒子的大部分属性都是写在父级上的*/

以上三种是最常见的，下期我们来讲讲其他奇形怪状的方法～

关注我，带你了解更多前端干货！

学前端，就选锐盈课堂！

ebDriver API提供了内置方法来查找基于不同属性的WebElement，例如ID，Name，Class，XPath，CSS Selectors，链接Text等。下面我们就针对这些方法进行元素查找定位。

打开Chrome浏览器，按F12出现开发者工具选项，选择Elements，优先选择Chrome的原因就是因为浏览器比较好用。

1. 鼠标点击下图弹框中左上角的箭头，再点击页面上要定位的元素

2. 对应的html页面上会显示对应的数据，并显示灰色背景

3. 按Ctrl+F显示出来搜索框，此处手写元素标签定位

如果你手写元素技能还有待提高的话，可以使用辅助工具来帮助你，Chrome有一个神器插件，可代替你手写元素的困扰

ChpoPath插件下载地址：
https://pan.baidu.com/s/1FCoSQHC1YdBBpETF71Ldfw ； 99tk

ID定位

driver.find_element_by_id("kw").send_keys('你好')

NAME定位

driver.find_element_by_name("wd").send_keys('name')

CLASS_NAME定位

driver.find_element_by_class_name("s_ipt").send_keys('class_name')

TAG_NAME定位

这个是行不通的，因为重复的标签太多了，无法定位准确

from selenium import webdriver
from selenium.webdriver.common.by import By

driver = webdriver.Chrome()
driver.get('https://www.baidu.com/')


try:
    driver.find_element_by_tag_name("input").send_keys('tag——name')
    print('找到了')
except Exception as e:
    print(f'么找到{e}')

我们使用tag_name定位，加了异常捕获，运行结果如下：

F:\virtualEnvironment\venv\Scripts\python.exe F:/git/AuomationTest/AuomationTestProject/webTestAuomation/element_localization.py
么找到Message: element not interactable
  (Session info: chrome=89.0.4389.72)


Process finished with exit code 0

实践检验了使用tag_name来定位是不靠谱的。

文本定位，link_text只针对含a标签的，不含a标签的使用，会抛错。

driver.find_element_by_link_text("新闻").click()

部分文本定位，partial_link_text也是只针对含a标签的使用，元素的部分文本内容定位，不含a标签的使用，会抛错

driver.find_element_by_partial_link_text("吃喝").click()

万能元素定位，也就是xpath和css定位，css定位后的代码运行起来的速度相对来说比xpath代码运行起来要快很多。

XPATH用法：

driver.find_element_by_xpath("xpath表达式")

xpath表达式有绝对路径和相对路径，通常我们都是使用相对路径

1. 绝对路径：/html/body/div[3]/div[1]/div[1]/div[1]/ul/li[9]/a

2. 相对路径：//*[text()="吃喝玩乐"]

我们不推荐绝对路径，因为前端代码稍微更改就会影响到定位，推荐使用相对路径

xpath 基本语法	注释信息
/	绝对定位，如果是选择当前p标签下的子级的话，可以使用
//	相对定位，当前p标签下的所有节点，不考虑它们的位置
@	选取属性，//[@id="xxx"]，//[@class="xxx"]
*	通配符，匹配所有 //*
@*	通配符，匹配所有属性 //input[@*="xxx"]

标签名+节点属性定位

//a[@class="header-title"]

组合元素+下标定位

//ul[@class="api-main"][1]/li/a[@class="list-con"]

尽量能不使用下标就不要使用下标定位，前端稍微修改代码也会影响颇大

模糊定位contains，通常元素不怎么好找时，可以使用模糊定位

//ul[@class="api-main"]/li/a[contains(@class, "list-con")]

当然模糊定位还有一些表达式：

//*[contains(text(), 文本元素属性)]	获取含文本信息的元素
//*[contains(@id, 元素属性)]	id也可以是class、name
//*[starts-with(@id, 元素属性)]	匹配什么开头
//*[ends-with(@id, 元素属性)]	匹配什么结尾
//*[matchs(text(), 文本元素属性)]	正则匹配含文本的元素

文本定位，找不到一些唯一标签时，可以使用文本定位

//*[text()="吃喝玩乐"]

逻辑运算定位，and、or

//ul[@class="api-main"]//*[@class="list-con" and text()="金融科技"]

轴定位

ancestor：爷爷节点
parent：父级节点
preceding：当前元素节点标签之前的所有节点
preceding-sibling：当前元素节点标签之前的所有节点兄弟节点，同级的
following：当前元素节点标签之后的所有节点
following-sibling：当前元素节点标签之后的所有节点兄弟节点，同级的

//ul[@class="api-main"]//*[text()="交通地理"]/parent::li//following-sibling::li//a

CSS用法：

driver.find_element_by_css_selector("css表达式")

class属性的直接 .元素属性

.api-main-list

id属性的直接 #元素属性

#password-o

直接元素定位

[class="api-main"]

层级组合定位

[id="s-top-left"]>[target="_blank"]

开头模糊定位

a[href^="https"]

结尾模糊定位

a[href$="com"]

包含模糊定位

a[href*="baidu"]

包含单词模糊定位

[target~="_blank"]

child的用法，实操后无法确定是不是已经定到元素，但有些时候运行代码会成功，所以也挺无语的，css运行是快，但是定位起来还是麻烦些...

.api-main:first-child：父级元素下第一个元素
.api-main:last-child：父级元素下最后一个元素
.api-main:only-child：父级元素下唯一一个子元素
.api-main:nth-child(下标)：父级元素下第几个元素

关于css的元素定位，后面实操后再给补上，以上总结或许能帮助到你，或许帮助不到你，但还是希望能帮助到你，如有疑问、歧义，评论区留言会及时修正发布，谢谢

未完，待续...

一直都在努力，希望您也是！

于CSS样式中的定位

对于css中的属性position（定位）来说，确实在网页布局上减少了很多麻烦，它可以将任何元素定为到页面上，相对于其他布局方式来说更加简便。它主要分为三种定位：

一、相对定位

position : relative；相对定位通常是相对自身来进行定位，在自身原来位置上进行移动，它不会改变元素的类型，属于没有完全地脱离文档流，不会影响后面元素的位置。通常情况下，它一般用作绝对定位的父级。

二、绝对定位

position ：absolute；绝对定位是指在父级发生相对定位的情况下，子级进行以父级为参照的定位，如果说父级没有发生相对定位时，则它以<body>为参照进行定位。通常使用绝对定位会使元素类型变为行内块，会影响后面元素的位置。使用absolute定位后，定位元素是脱离文档流的，这时候父级会检测不到定位元素的宽高。inline元素使用absolute定位之后，可以对其设置宽高；元素是不可以同时使用绝对定位和浮动的。

三、固定定位

position ： flxed；固定定位于前面两种不同，它是相对于浏览器进行定位，固定在整个屏幕的某个位置，并且不会随着鼠标滚轮进行移动，通常用作回到顶部、页边广告等，定位层级z-index一般较高。固定定位也会使元素类型变为行内块，影响后面元素的位置。

关于CSS中position的使用就简单介绍到这里，希望能够对您的布局有帮助，若有错误和好的补充欢迎讨论，谢谢！

在线咨询

上一篇：HTML转换成PDF，这样就搞定了
下一篇：从前端到全端：JavaScript逆袭之路

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

css中如何让div水平居中(上)

您的项目需求