css制作一个搜索栏，要求居中

可以使用以下代码实现：

HTML代码：

<div class="search-bar">
  <input type="text" placeholder="请输入搜索内容">
  <button>搜索</button>
</div>

CSS代码：

.search-bar {
  width: 500px; /* 搜索栏宽度 */
  margin: 0 auto; /* 水平居中 */
  text-align: center; /* 文本居中 */
}

.search-bar input[type="text"] {
  width: 70%; /* 输入框宽度 */
  padding: 10px; /* 输入框内边距 */
  border: none; /* 去掉边框 */
  border-radius: 20px; /* 圆角 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

.search-bar button {
  width: 20%; /* 按钮宽度 */
  padding: 10px; /* 按钮内边距 */
  border: none; /* 去掉边框 */
  border-radius: 20px; /* 圆角 */
  background-color: #007bff; /* 背景颜色 */
  color: #fff; /* 文字颜色 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  cursor: pointer; /* 鼠标指针样式 */
}

/* 鼠标悬停样式 */
.search-bar button:hover {
  background-color: #0069d9;
}