如何忽略浮动元素的影响，实现文本水平居中？

问题原因 #

浮动元素会脱离常规文档流，同时会挤占同层级行内/块级元素的内容可用宽度：你的右浮动按钮在h1之前渲染，会占据h1所在行的右侧空间，h1的text-align: center是在扣除按钮宽度后的剩余可用宽度内居中，自然无法对齐整个页面的水平中线。

解决方案 #

方案1：让h1换行渲染（最简便，适配大多数场景） #

给h1添加clear: right属性，清除右侧浮动带来的排列影响，h1会另起一行占据整行宽度，此时设置的居中就会相对于整个页面生效：

<button onclick="hide()" style="float: right">Sign up</button>
<h1 style="text-align: center; clear: right">Smart home</h1>

方案2：按钮与h1同排显示，h1完全居中 #

如果要求按钮和标题在同一行，建议放弃浮动，改用Flex布局实现，避免浮动带来的布局塌陷、宽度挤占问题：

1. 给两个元素套一个父容器，设置为Flex布局，垂直居中对齐
2. 给按钮添加margin-left: auto，自动占据左侧剩余空间把按钮推到最右侧，此时h1会自然处于父容器的水平中线位置

<div style="display: flex; align-items: center;">
  <h1 style="text-align: center; flex: 1">Smart home</h1>
  <button onclick="hide()">Sign up</button>
</div>

方案3：保留浮动，同排显示 #

如果必须保留原有浮动写法且要求同排，可以给h1设置绝对定位，脱离文档流不受浮动元素宽度影响：

<div style="position: relative;">
  <button onclick="hide()" style="float: right">Sign up</button>
  <h1 style="position: absolute; width: 100%; left: 0; top: 0; text-align: center; margin: 0">Smart home</h1>
</div>

内容的提问来源于stack exchange，提问作者new_new123