要将地图居中于要素上，可以使用OpenLayers的fit方法和getExtent方法来实现。以下是一个示例代码：

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import Map from 'ol/Map';
import View from 'ol/View';
import { fromLonLat } from 'ol/proj';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import { Vector as VectorLayer } from 'ol/layer';
import VectorSource from 'ol/source/Vector';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import { Icon, Style } from 'ol/style';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
  @ViewChild('map', { static: true }) mapElement: ElementRef;
  map: Map;

  constructor() { }

  ngOnInit() {
    this.initMap();
    this.addMarker(10, 10); // 添加一个要素作为示例
  }

  initMap() {
    this.map = new Map({
      target: this.mapElement.nativeElement,
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        center: fromLonLat([0, 0]),
        zoom: 2
      })
    });
  }

  addMarker(lon: number, lat: number) {
    const iconStyle = new Style({
      image: new Icon({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        src: 'https://openlayers.org/en/v4.6.5/examples/data/icon.png'
      })
    });

    const marker = new Feature({
      geometry: new Point(fromLonLat([lon, lat]))
    });
    marker.setStyle(iconStyle);

    const vectorSource = new VectorSource({
      features: [marker]
    });

    const vectorLayer = new VectorLayer({
      source: vectorSource
    });

    this.map.addLayer(vectorLayer);

    // 获取要素的范围
    const extent = vectorSource.getExtent();

    // 将地图居中于要素
    this.map.getView().fit(extent, { padding: [100, 100, 100, 100] });
  }
}

在上述示例中，addMarker方法用于添加一个要素（marker）到地图上，并将地图居中于该要素。fit方法会根据要素的范围来调整地图的可视范围，并使用padding选项来设置地图与要素之间的间距。

请注意，上述示例使用的是OpenLayers 6的版本，如果你在项目中使用的是其他版本，可能需要进行相应的调整。