如何用css实现子元素固定居中效果？

Question

我能想到的是flex布局，让左边的返回按钮垂直居中，父元素加个padding，中间的按钮用定位。

如果不用这种方法，还有别的方法更好实现吗？（最右侧可能也会有按钮）

Answer 1

body {margin:0;}
.row {position:relative;text-align:center;line-height:4;background-color:#F0F0F0;}
.row .item {display:inline-block;margin:0 auto;padding:0 0.5em;background-color:#CCC;}
.row .nav {position:absolute;left:0;top:50%;line-height:2;padding:0 0.5em;box-shadow:0 0 0 1px red inset;transform:translateY(-50%);}
.row .nav.nav-left {left:0;}

<div class="row">
  <div class="item">一二三四五</div>
  <div class="nav nav-left">nav</div>
</div>

https://codepen.io/FractalPen/pen/qBKavmQ

Answer 2

按照不同的布局去做就好了，如果只有一块区域就随便处理。各种的剧中方式可以做。
如果有左中右三块区域会出现按钮的，然后中间居中，那么就把他们拆分成三个 div 去处理。

div.container
   div.left
   div.content
   div.right

这样的结构：左侧的就居左，中间的就居中，右侧的就居右。单独做一下样式就好了。

如果你是不了解各种居中的方式的话，可以参考这篇文章 web开发常用的几种居中形式